为啥 react-router-dom 自定义路由不起作用?
Posted
技术标签:
【中文标题】为啥 react-router-dom 自定义路由不起作用?【英文标题】:Why is react-router-dom custom route not working?为什么 react-router-dom 自定义路由不起作用? 【发布时间】:2020-07-31 07:35:53 【问题描述】:我正在尝试构建一个涉及私有和公共路由的应用程序,因此我使用自定义私有和公共路由,但问题是当我尝试发送组件时,它没有被渲染并且我无法弄清楚出了什么问题。
这是沙箱的link,入口点,即处理公共和私有路由的路由link。
注意:自定义功能路由有效,但我的路由无效,即使我尝试传递一些自定义路由,例如 h1 或其他有效的路由。但不是我建造的。
【问题讨论】:
【参考方案1】:您必须为此 url '/' 使用 Route 属性 "exact"
来自文档:
exact - 如果为 true,则仅当路径与 location.pathname 匹配时才会匹配 没错。
请仔细阅读有关 Switch 的文档:
Switch - 渲染第一个孩子或与 位置。
每次第一个子组件都是那个组件
<PrivateRoute path="/" component=route.component />;
因为通过下一个算法进行比较:
'/'.includes('/') // true
'/write'.includes('/') // true
但如果具有确切的属性,它将在下一个场景中起作用:
'/' === '/' // true
'/write' === '/' // false
【讨论】:
我已经试过了,你可以试试看。它仍然不起作用。这是link @RaghavSharma 您必须将 key=route.path 添加到每个列表项,它才会起作用 你在私人路线(component ...) => return component
做下一件事,但必须(component: Component, ...) => return <Component />
【参考方案2】:
您必须使用 Route 属性中的“精确”。因为<Switch>
会检查并渲染与该位置匹配的第一个子 Route。在这种情况下是“/”,并且您的所有路由都包含“/”
<PrivateRoute exact path=route.path component=route.component />
然后你必须在你的路由数组内的属性组件中渲染组件。
这是您的私有路由的最终对象:
const routes = [
path: '/',
component: <h1>path component</h1>,
,
path: '/write',
component: <UserInfo/>,
,
path: '/profile',
component:<Profile/>,
,
path: '/polls',
component: <ListPolls/>,
,
path: '/details',
component: <UserInfo/>,
]
因为您使用的是 Route 的“render”属性。
如果要发送不带 的组件,则应使用 Route 的“组件”属性,但只能使用组件,不能渲染 html 代码。
【讨论】:
【参考方案3】:有两个问题
-
您需要将
exact
给您的PrivateRoute
和PublicRoute
由于您使用render
属性,您需要返回一个元素而不是组件类,因此类似于<component />
但自定义组件需要以大写字母开头,因此您需要重命名它。
updated example
另一个问题是,对于大多数路由,组件是实际组件,但对于 /
路由,您传递了一个元素,因此您需要以不同的方式呈现它
【讨论】:
以上是关于为啥 react-router-dom 自定义路由不起作用?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 react-router-dom 中正确定义后备路由
使用链接后,在嵌套路由中未定义 React-router-dom 参数