javascript - 将 props 传递给 React Router 4 中的组件

Question

我是react-router新手，我刚刚开始使用react-router V4编写一个应用程序。我想将 props 传递给 <Match /> 渲染的组件我想知道“最好”或“正确”的方法是什么。

是通过这样做吗？

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

这(将 props 传递给要由 <Match /> 渲染的组件)对于使用 React-router 来说是否是一个很好的实践，或者它是一个反模式还是什么？如果是这样，为什么？

Answer 1

您必须使用 render 属性而不是 component 来传递自定义属性，否则只能 default Route props已传递({match, location, History})。

我将我的 props 传递给 Router 和子组件，如下所示。

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>