Question

考虑以下React Router设置：

<Router history={history}>
    <Route path="/" component={Root}>
        <Route path="/users" component={UserList}/>
        <Route path="/users/new" component={UserCreate}/>
        <Route path="/users/:id" component={User}/>

        <Route path="/tags" component={TagList}/>
        <Route path="/tags/new" component={TagCreate}/>
        <Route path="/tags/:id" component={Tag}/>
    </Route>
</Router>

在任何时候，我都希望能够显示特定的模态。现在，我在Redux商店中使用modal属性来管理它。 Root组件（<Route path="/" component={Root}>）检查此属性，并在设置时呈现必要的模态。

这可以通过React Router实现吗？因此，我不必在我的redux商店中保留modal属性，而是可以导航到类似/users#modal或/users/modal的内容，并同时呈现UserList组件（如定义的那样）在<Route path="/users" component={UserList}/>）和模态组件

Answer 1

您可以执行此操作的方法之一是检查各个组件的componentDidMount中的位置哈希值。

    componentDidMount() {
        if (window.location.hash) {
           const hash = window.location.hash.substring(1);
           if (hash === "modal") {
             //show your modal here.
           }
        }
    }

如果所有组件都需要以这种方式运行，那么您可以从公共基类继承所有组件。

React路由器路由配置，支持在任何路由

1 个答案: