Question

一切正常，直到我用其他一些值和要求更新了路由（在下面的示例中将它们称为：键和可选）。当我单击该按钮以转到新页面时，它会更改路径URL（在浏览器中），但它会留在同一页面（ MainPage ）且没有错误并且不会转到 NewPage 或 TestSite 。我已经在页面上添加了withRouter。任何想法如何解决此问题？谢谢！

<Router>
    <Switch>
        <Route exact path='/:Key/:optional?' render={(props) => <MainPage key={props.match.params.key} optional={props.match.params.optional} />} />
        <Route exact path='/NewPage/:Key/:optional?' render={(props) => <NewPage />} />
        <Route exact path='/TestSite' render={(props) => <TestSite/>} />
    </Switch>   
</Router>

Render（）

<Link to="/NewPage/Key"><button className="btn btn-warning">Open New Page</button></Link>
<Link to="/TestSite"><div className="btn btn-success">Open Test Page</div></Link>

Answer 1

如果我正确理解了这种情况，那么我认为解决方案是像这样更改<Route />中<Switch />组件的顺序：

<Router>
    <Switch>

        {/* Set this route as the first in the switch /*}
        <Route exact path='/NewPage/:Key/:optional?' render={(props) => <NewPage />} />

        <Route exact path='/TestSite' render={(props) => <TestSite/>} />

        {/* Set this route as last in the switch /*}
        <Route exact path='/:Key/:optional?' render={(props) => <MainPage key={props.match.params.key} optional={props.match.params.optional} />} />
    </Switch>   
</Router>

之所以这样，是因为路由优先级基于在交换机中定义路由的顺序。

因此，当您使用<Link to="/NewPage/Key">导航时，该路线的NewPage部分将与:Key匹配，并且该路线的Key部分将与{{1} }。通过如图所示对路由进行重新排序，这应该会为:optional?展示预期的<NewPage />组件。

希望有帮助！

Redux路由更改路径，但不呈现新页面

1 个答案: