为什么 react-router-dom 自定义路由不起作用？答案

【问题标题】：Why is react-router-dom custom route not working?为什么 react-router-dom 自定义路由不起作用？
【发布时间】：2020-07-31 07:35:53
【问题描述】：

我正在尝试构建一个涉及私有和公共路由的应用程序，因此我使用自定义私有和公共路由，但问题是当我尝试发送组件时，它没有被渲染并且我无法弄清楚出了什么问题。

这是沙箱的link，入口点，即处理公共和私有路由的路由link。

注意：自定义功能路由有效，但我的路由无效，即使我尝试传递一些自定义路由，例如 h1 或其他有效的路由。但不是我建造的。

【问题讨论】：

标签： reactjs react-router react-router-dom react-router-redux

【解决方案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

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

【讨论】：