Question

ReactDOM.render(  
  <Provider store={store}>    
      <BrowserRouter>
        <Root />
     </BrowserRouter>
     </Provider>,
  document.getElementById('root')
);

这是Root.js：

 class Root extends Component {

        componentDidUpdate(prevProps) {      
          if (this.props.location !== prevProps.location) {
           // this.onRouteChanged();
          }
        }
        render(){
            console.log("Router Render")
                return (

                            <div>
                                <Header/>
                                <Route exact path="/" component={Login} />
                                <Route  path="/tabs" component={Tabs} />
                            </div>

                )
        }
    }



    export default withRouter(Root);

我的Header组件位于我的网站顶部。我希望我的Header组件在路由更改时始终保持最佳状态。但是当路由发生变化时，我想将道具传递给我的Header组件。

例如我在开始时位于主路径（path =“/”）。我想将道具传递给我的标题组件( <Header locationinfo="main" /> ).

如果我将路径更改为“path =”/ tabs“我想将另一个prop值传递给我的Header组件(<Header locationinfo="tabs />)

该案例的最佳做法是什么？

Answer 1

使用render道具代替component。

更多信息：https://reacttraining.com/react-router/core/api/Route/render-func

<Route exact path="/" render={() => {
  <div>
    <Header locationinfo="main" />
    <Login />
  </div>
}} />
<Route path="/tabs" render={() => {
  <div>      
    <Header locationinfo="tabs" />
    <Tabs />
  </div>
}} />

Answer 2

如果使用withRouter HOC包装Root组件，则可以将react路由器位置prop传递给Header：

<div>
  <Header location={props.location} />
  <Route exact path="/" component={Login} />
  <Route  path="/tabs" component={Tabs} />
</div>

反应路由器和传递道具

2 个答案: