在使用双参数重新加载页面时，应用程序崩溃。

Posted 2023-01-13

我使用的是 react-router-dom v5. 当我在我的应用程序中点击重新加载按钮时，例如在 /home 或 / 或 /about 页面加载正确。但是当我在一些双路径上点击重载按钮时，例如 /home/something 或 /something/something 应用程序无法启动! 没有任何东西被渲染。

这种情况只发生在开发模式下。

我的路线。

<Route path='/about' component=About/>
<Route path='/' component=Home/>
<Route path='/home/:id' component=Home/>
<Route path='/something/something' component=Home/>
<Redirect to='/' />

正如你所看到的，我选择了一个路由，用于处理 /home:id 或 /something/something但如果我按下重装时，仍然是在 /home/something 或 /something/something 应用程序崩溃。

我希望它至少能重定向到以下地址 / 路径... ...但它仍然不工作，也没有。

这对我来说是个大问题 因为我不能去嵌套路由和重载来获取componentDidMount的数据......

答案

而不是设置 <Redirect to="/" /> 改为 <Redirect from="*" to="/" /> 并加 exact 对于 / 途径

<Route path='/about' component=About/>
<Route exact path='/' component=Home/>
<Route path='/home/:id' component=Home/>
<Route path='/something/something' component=Home/>
<Redirect from="*" to="/" />

另一答案

在这种情况下，要想让路由重定向，你需要加入 exact 道具中，并将路由包裹在 <Switch> 组件。这将允许你完全按照地址栏中出现的路线进行匹配，并且只匹配它们。

试试这个。

<Switch>
    <Route exact path="/about" component=About />
    <Route exact path="/" component=Home />
    <Route exact path="/home/:id" component=Home />
    <Route exact path="/something/something" component=Home />
    <Redirect to="/" />
</Switch>

这是一个沙盒。https:/codesandbox.iosgreat-ardinghelli-6teej 试试这个：

参考文献。

https:/reacttraining.comreact-routerwebapiRouteexact-bool。

https:/reacttraining.comreact-routerwebapiSwitch。