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

Question

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

这是处理 public 和专用路由的 link to the sandbox, the entry point i.e the routes link。

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

Answer 1

您必须为此 url '/'

使用路由属性 "exact"

来自文档：

exact - When true, will only match if the path matches the location.pathname exactly.

请仔细阅读有关 Switch 的文档：

Switch - Renders the first child or that matches the location.

第一个child每次都是那个组件

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

因为下一个算法比较有效：

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

但确切地说属性它将在下一个场景中起作用：

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

Answer 2

您必须使用 Route 属性中的 "exact"。因为 <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/>,
    }
]

因为您正在使用路由的 "render" 属性。

如果不发送组件，应该使用Route的"component"属性，但是只能使用组件，不能渲染HTML代码。

Answer 3

有两个问题

你需要给你的 PrivateRoute 和 PublicRoute

exact

因为你使用了 render 道具，你需要 return 一个元素而不是组件 class，所以像 <component /> 但自定义组件需要开始用大写字母，所以你需要重命名它。

updated example

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

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

Why is react-router-dom custom route not working?

reactjs

react-router

react-router-dom

react-router-redux