将道具传递给React Router 4中的组件

Question

我是react-router的新手,我刚开始使用react-router V4编写应用程序.我想将道具传递给所呈现的组件<Match />,我想知道什么是"最佳"或"正确"的方式.

这是做这样的事吗？

<Match pattern="/" render={
    (defaultProps) => <MyComponent myProp = {myProp} {...defaultProps} />
}/>

这是(通过道具将组件传递给组件<Match />)甚至是使用react-router这样做的好习惯,还是反模式或其他东西; 如果是这样,为什么？

Answer 1

您必须使用renderprop而不是component传递自定义道具,否则只传递默认路径道具({match, location, history}).

我将我的道具传递给路由器和子组件,如此.

class App extends Component {

  render() {
    const {another} = this.props
    return <Routes myVariable={2} myBool another={another}/>
  }
}

const Routes = (props) =>
  <Switch>
    <Route path="/public" render={ (routeProps) => 
      <Public routeProps={routeProps} {...props}/>
    }/>
    <Route path="/login" component={Login}/>
    <PrivateRoute path="/" render={ (routeProps) =>
       ...
    }/>
  </Switch>

Answer 2

render() {
  return (
    <Router history={browserHistory}>
      <Switch>
        <Route path="/" 
           render={ ()  => <Header 
             title={"I am Title"} 
             status={"Here is my status"}
           /> }
        />
        <Route path="/audience" component={Audience}/>
        <Route path="/speaker" component={Speaker}/>
      </Switch>
    </Router>
  )
}

Answer 3

我将按照以下方式进行操作以提高清晰度。

const myComponent = <MyComponent myProp={myProp} {...defaultProps} />


<Match pattern="/" component={myComponent} />

这样你的router代码就不会变得混乱了！