Question

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

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

注意：即使我尝试传递一些自定义路由（例如h1或它可以运行的路由），“自定义”功能路由仍在起作用，但不适用于我的路由。但是不是我建造的。

Answer 1

您必须使用Route属性中的“精确”。因为<Switch>检查并渲染与位置匹配的第一个子路径。在这种情况下为“ /”，并且您的所有路线都包含“ /”

 <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的“ component”属性，但只能使用组件，而不能呈现HTML代码。

Answer 2

有两个问题

您需要将exact和PrivateRoute分别给PublicRoute
由于使用了render属性，因此您需要返回一个元素而不是组件类，因此类似<component />的东西，但是自定义组件需要以大写字母开头，因此您需要对其进行重命名。

updated example

另一个问题是，对于大多数路线，该组件是实际的组件，但是对于/路线，您传递了一个元素，因此您需要以其他方式进行渲染

Answer 3

您必须为此URL'/'使用Route属性“ exact”

摘自文档：

精确-如果为true，则仅在路径与位置匹配时才匹配。完全是

只需仔细阅读有关Switch的文档部分：

开关-呈现第一个孩子或与之匹配的孩子位置。

第一个孩子将是该组件

<PrivateRoute path="/" component={route.component} />;

因为比较下一个算法的工作原理：

'/'.includes('/') // true
'/write'.includes('/') // true

但是具有确切的属性，它将在下一个场景中起作用：

'/' === '/' // true
'/write' === '/' // false

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

3 个答案: