react组件 如何获取URL 参数

Question

//客户端
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<div><Router><Route path='/supplies/:client_id' component={App}></Route></Router></div>, document.getElementById('root'));

App.js

class App extends Component {
  state = {users: [],
          products:[]};
  
  steps = ['纺纱','织布','后整','检查入库','发货'];

  componentDidMount() {
    console.log(this.props.params.client_id);  //不对这里
    fetch('/supplies/320001')
      .then(res => res.json())
      .then(products => this.setState({ products }));
  }

访问
http://localhost:3000/supplies/320001
http://localhost:3000/supplies/420001

如何获取320001 或 420001

Answer 1

this.props.params.client_id你是在哪里定义的。

打印下this，看是不是当前组件的实例

另外打印下 this.props.match.params

Answer 2

@说好的一血呢 this是当前组件， http://localhost:3000/supplies/320001 320001是client_id.
是不是用的不对？

Answer 3

你把this.props打印出来看看。与路由有关的参数有location history match.

所以你传的参数在match中。并非params，这个是旧版本router的参数。