Question

我是react-router的新手，我刚开始使用react-router V4编写应用程序。我想将道具传递给<Match />呈现的组件，我想知道什么是最好的＆＃39;或者＆＃39;适当的＆＃39;这样做的方法。

通过做这样的事情吗？

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

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

Answer 1

您必须使用render道具代替component传递自定义道具，否则只传递default Route props（{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

我对react-router很新，遇到了类似的问题。我已经创建了一个基于Documentation 的包装器，它似乎有效。

// Wrap Component Routes
function RouteWrapper(props) {
  const {component: Component, ...opts } = props

  return (
   <Route {...opts} render={props => (
     <Component {...props} {...opts}/>
   )}/>
 )
}

 <RouteWrapper path='/' exact loggedIn anotherValue='blah' component={MyComponent} />

到目前为止一切顺利

Answer 4

我将render与定义的方法结合使用，如下所示：

class App extends React.Component {
  childRoute (ChildComponent, match) {
    return <ChildComponent {...this.props} {...match} />
  }

  render () {
    <Match pattern='/' render={this.childRoute.bind(this, MyComponent)} />
  }
}

Answer 5

render道具用于编写内联匹配，因此您的示例是传递额外道具的理想方式。

Answer 6

我会像下面这样做以提高清晰度。

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


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

这样你的router代码就不会搞砸了！。

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

6 个答案: