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

Question

一切都运行良好，直到我用一些额外的值和要求更新了路由(让我们在下面的示例中称它们为：key和optional(。当我单击按钮转到新页面时，它会更改路径URL(在浏览器中(，但它会保持在同一页面(主页(上，没有错误，并且不会转到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>

Answer 1

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

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

希望对您有所帮助！