Question

在我想到的示例中，我在/projects处有一个索引页。如果单击页面上的一项，则会弹出一个包含更多详细信息的模式。现在，我希望我的用户能够使用诸如/projects/1之类的敏感URL在打开了模式的页面上添加书签。

如果我使用this.props.history.push("projects/1")来更改URL，则除非我先定义路由，否则浏览器中什么也不会显示。但是，实际上我根本不需要单独的路由，而只是一种改变URL外观的方式，除了显示模式之外，不呈现其他任何组件（因此，这个问题与Changing the URL in react-router v4 without using Redirect or Link不同）。

有人知道怎么做，或者甚至有可能吗？

FWIW，这是我在App.js中的路由：

    <Router>
        <div>
          <NavBar/>
          <Switch>
            <Route exact path='/' render={(props) => <Home {...props} buttonVisible={true} />}/>
            <Route exact path='/projects' render={(props) => <ProjectsContainer {...props} projects={this.props.projectList} />} />
            <Route path='/projects/:projectId/result' component={ResultsContainer} />
            <Route exact path='/projects/new' render={(props) => (<div><Home {...props} buttonVisible={false}/></div>)}/>
          </Switch>
        </div>
    </Router>

Answer 1

您可以使用嵌套路由

将您的项目路线转换为

<Route path='/projects' render={(props) => <ProjectsContainer {...props} projects={this.props.projectList} />} />

然后在项目容器中添加另一个Route组件，例如

<Route path={`${match.path}/:id`} render={(props) => /* here you get the id via props.match.params.id */ } />

用代码替换我的注释以创建模态

这使您可以将链接标记为特定项目，并仅通过链接来控制模式

如何在不渲染另一个组件或在React中重定向到其他路由的情况下更改URL？

1 个答案: