为啥 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 ...) =&gt; return component做下一件事,但必须(component: Component, ...) =&gt; return &lt;Component /&gt;【参考方案2】:

您必须使用 Route 属性中的“精确”。因为&lt;Switch&gt; 会检查并渲染与该位置匹配的第一个子 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 给您的PrivateRoutePublicRoute 由于您使用render 属性,您需要返回一个元素而不是组件类,因此类似于&lt;component /&gt; 但自定义组件需要以大写字母开头,因此您需要重命名它。

updated example


另一个问题是,对于大多数路由,组件是实际组件,但对于 / 路由,您传递了一个元素,因此您需要以不同的方式呈现它

【讨论】:

以上是关于为啥 react-router-dom 自定义路由不起作用?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 react-router-dom 中正确定义后备路由

使用链接后,在嵌套路由中未定义 React-router-dom 参数

react-router-dom

具有自定义历史记录的反应路由器不起作用

为啥自定义路由在 Nelmio API Doc 中出现两次?

为啥在部署我的项目后卡住/空白页面?反应路由器 Dom |参数