如何在 create-react-app 上使用“/”阻止路由

Posted 2023-02-22

【中文标题】如何在 create-react-app 上使用“/”阻止路由

【英文标题】：How to block routes with '/' on create-react-app

【发布时间】：2019-11-09 04:55:39

【问题描述】：

我正在创建一个包含四个页面的简单 SPA，但我发现了一个导致我的应用程序崩溃的大问题。我有四个路线：

<Switch>
     <Route exact path='/przewodnictwo' component=Conductivity />
     <Route exact path='/apartamenty' component=Apartments />
     <Route exact path='/przewoz_osob' component=Transport />
     <Route exact path='/narciarstwo' component=Skiing />
     <Redirect from='*' to='/przewodnictwo' />
</Switch>

一切正常，我的导航链接看起来像这样：

<NavLink exact to='/apartamenty'>
       Apartamenty
</NavLink>

我所有的图片都是从公共文件夹加载的。像/example、/przewodnictwo/23 这样的任何其他路由都将我重定向到/przewodnictwo 的主页。但是当我在 url /przewodnictwo/ 或 /apartamenty/ 中写入时发生了奇怪的事情，这些都没有被阻止，并且我的图像不是从公共文件夹而是从不存在的 /public/apartamenty/3.jpg 加载的。

编辑

我忘记在路径图像中添加“/”，现在可以完美运行。 src='1.jpg' 已更改为 src='/1.jpg' 感谢您的帮助。

但是如何阻止 '/przewodnictwo/' 路由？我真的不喜欢这个网址，太丑了

【问题讨论】：

你能显示代码，你显示/加载图片的位置吗？

你用的是哪个路由器？

@cbdev420 import BrowserRouter as Router, Route, Redirect, Switch from 'react-router-dom'; v^4.3.1

@BorysKupar 是的，我忘记了，我已将 / 添加到路径中并且效果很好，但仍然如何阻止此 url: '/przewodnictwo/' ??

您的意思是，如果有人输入/przewodnictwo/，您希望找不到结果？

【参考方案1】：

要阻止尾部斜杠匹配您的路由，您可以在 Route 组件上使用 strict 属性。

来源：https://reacttraining.com/react-router/web/api/Route/strict-bool

<Route>

严格：布尔

当为 true 时，带有斜杠的路径只会匹配带有斜杠的 location.pathname。当 location.pathname 中有额外的 URL 段时，这不起作用。

【讨论】：

非常感谢你是第一个所以我接受了你的回答

【参考方案2】：

您需要使用strict 关键字来避免斜杠。根据严格的 react-router 文档

true 时，带有斜杠的路径只会匹配 location.pathname 带有斜杠。这在有时没有效果 是 location.pathname 中的附加 URL 段。

<Switch>
     <Route exact strict path='/przewodnictwo' component=Conductivity />
     <Route exact strict path='/apartamenty' component=Apartments />
     <Route exact strict path='/przewoz_osob' component=Transport />
     <Route exact strict path='/narciarstwo' component=Skiing />
     <Redirect from='*' to='/przewodnictwo' />
</Switch>