将路由器道具共享给未包装在路由器中的组件答案

【问题标题】：Sharing router props to components that are not wrapped in Router将路由器道具共享给未包装在路由器中的组件
【发布时间】：2018-09-02 01:02:34
【问题描述】：

我的路线如下所示：(Main.js)

<BrowserRouter>
    <Switch>
      <Route name="login" exact path="/login" component={LoginPass} />
      <Route name="loginWithTripId" exact path="/login/:tripid" component={LoginPass} />
      <PrivateRoute path="/trips/:tripid" component={App} />
    </Switch>
  </BrowserRouter>

在我的 App 渲染方法中：(App.js)

render() {
    const { classes, ...other } = this.props;
    return (
  <div className={classes.root}>
    <Appbar
    />

    <LeftDrawer
    />

    <Switch>
      <Route
        path={'/trips/dashboard'}
        render={props => (
          <Dashboard
            {...other}
            {...props}
          />
        )}
      />
      <Route
        path={'/trips/:tripid/itinerary'}
        render={props => (
          <Itinerary
            {...other}
            {...props}
          />
        )}
      />
      <Route render={() => <Redirect to={'/trips/dashboard'} />} />
    </Switch>
  </div>
);
}

如何共享 Dashboard 和 Itinerary 中传递的 router props 而不保存在 App 本地状态中？我尝试在 LeftDrawer 和 Appbar 中使用 withRouter，但它具有其父级（Main.js）的路由器道具。我得到 match.path="/trip/:tripid" 而不是 "trip/:tripid/itinerary" 或 "trip/dashboard"。

对于上下文，我需要根据 URL 在我的 appbar/leftdrawer 组件中呈现某些元素，并且我想使用传递给行程和仪表板组件的 match.path 道具进行匹配。例如，如果我在路线“/trip/dashboard”中，则会加载仪表板。所以appbar需要有一个ADD按钮来添加行程。此按钮不在行程视图的应用栏中。过去，我在仪表板和行程组件中拥有 LeftDraewr 和 Appbar，但我将其提升了一级。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

好吧，如果您想要 AppBar 中的路由器道具（在所有页面上呈现），那么您可以将其包装在匹配每个路径的路由中：

<Route path="*" component={AppBar}/>

使用 '*' 路径，它将像现在一样在每个页面上呈现，并被包裹在 <Route/> 中，那么它应该有可用的路由器道具。

【讨论】：