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

在我用一些附加值和要求更新路由之前，一切都很正常（在下面的示例中，我们称它们为：key和optional）。当我点击按钮转到一个新页面时，它会更改路径URL（在浏览器中），但它会保持在同一页面（主页），没有错误，也不会转到新页面或测试站点。我已经在页面上包含了带有路由器的

。有没有办法解决这个问题？谢谢

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

打开新页面
打开测试页
如果我正确理解了情况，那么我认为解决方案是更改
中
组件的顺序，如下所示：

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


{/*将此路由设置为交换机中的第一个路由/*}
} />
} />
{/*将此路由设置为交换机中的最后一个/*}
} />

原因是路由优先级基于交换机中定义路由的顺序

因此，当您使用
导航时，路线的
新建页面
部分将匹配
：键
，路线的
键
部分将匹配
：可选？
。通过如图所示对路由进行重新排序，这应该是为
显示的预期
组件的情况

希望有帮助
 可能需要将它移到
的底部，因为
测试站点
也会被
：Key
捕获！我现在拿到了，谢谢！我将主页路径移到了底部，然后worked@DacreDenny@fila90是正确的，因为
MainPage
会认为“TestSite”是键，并且因为下一个值是可选的，所以是否有一个值并不重要
<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>