时间戳

首页 > 解决方案 > Redux 路由更改路径但不渲染新页面

reactjs - Redux 路由更改路径但不渲染新页面

问题描述

一切正常，直到我用一些额外的值和要求更新了路线（在下面的示例中称它们为：键和可选）。当我单击按钮转到新页面时，它会更改路径 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>

使成为（）

<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>

标签： reactjsreduxreact-redux

解决方案

如果我正确理解了情况，那么我认为解决方案是像这样更改<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部分路线将匹配:optional?。通过如图所示重新排序路由，这应该会<NewPage />显示预期的组件<Link to="/NewPage/Key">。

希望有帮助！

推荐阅读