javascript - react-router V4 After routing is nested, how does the parent route pass specific parameters to the child route?

Question

The following is the nested code

ReactDOM.render(
  <HashRouter>
    <App>
      <Route path='/login' component={Login} />
    </App>
  </HashRouter>,
  document.getElementById('root')

Code of parent routing App

constructor(props) {
    super(props);
    this.state = {
      userName: '123'
    }
  }
render() {
    return <p className="App">
      {this.props.children}
    </p>
   }

How to pass the userName parameter to the sub-route login?

Answer 1

Temporarily use context to pass the data in the parent routing state to the child routing component
Context usage

Answer 2

I don’t know how you want to achieve it. If you just bring data there, you can do this

/login/:userName

Answer 3

If the routing component needs to pass parameters, the Route component should not set component, but render. Please read the react-router official documentation before deciding whether to ask questions.