Question

我正在实现No Match route，很奇怪，它是使用每个指定的路线进行渲染的，并且也针对非指定的路线进行渲染（应该是），因此它一直在渲染。

这里有一些代码可供研究：RouterNavigation组件，该组件使用传递的数组生成<Route />，最后为404添加一个<Route />。

 <Fragment>
  {RouteConfig.map((route, i) => (
    <Route
      render={({ location }) =>
        route.isProtected ? (
          isAuthenticated ? (
            route.component
          ) : (
            <Redirect
              to={{
                pathname: "/login",
                state: { from: location }
              }}
            />
          )
        ) : (
          route.component
        )
      }
      exact={route.path === "/" ? true : false}
      path={route.path}
      key={i}
    />
  ))}
  <Route
    key={RouteConfig.length}
    path="*"
    render={({ location }) => {
      return (
        <SuspenseContainer>
          <PageNotFound from={location.pathname} />
        </SuspenseContainer>
      );
    }}
  />
</Fragment>

在App.tsx代码中导入我的RouterNavigation组件：

      <Router>
        <Switch>
          <RouterNavigation />
        </Switch>
      </Router>

渲染后

RouterNavigation Component Code

App Component Code

App url

更新：注意到的一件事是，当我们动态创建路由时，始终都会进行404路由渲染，以下是包含很少重构的404路由的来自react-router-dom的相同示例的url（即，通过加入Route部分并创建渲染效果的组件，与我们所做的相同）

https://codesandbox.io/embed/react-router-no-match-404-8eiv9?fontsize=14&hidenavigation=1&theme=dark

打包json

"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",

Answer 1

使用Fragment代替Switch

<Switch> 
  //routes go here
  <Route ... /> 
  ...
</Switch>

此处： https://codesandbox.io/s/react-router-no-match-404-bn9yg

Route必须是Switch的直接子元素，而Switch之外的RouterNavigation是多余的，因此我们可以将其删除：

<Router>
  <RouterNavigation />
</Router>

在上面的代码sanbox中编辑。

Answer 2

代替使用

   <Router>
    <Switch>
      <RouterNavigation />
    </Switch>
  </Router>

这应该可以工作，因为<Fragment>可以将子级列表分组，而无需在DOM中添加额外的节点。

在相同的组件中使用

<Switch>
  {RouteConfig.map((route, i) => (
    <Route
     render={({ location }) =>
      route.isProtected ? (
      isAuthenticated ? (
         route.component
       ) : (
         <Redirect
           to={{
             pathname: "/login",
             state: { from: location }
           }}
         />
       )
     ) : (
       route.component
     )
   }
   exact={route.path === "/" ? true : false}
   path={route.path}
   key={i}
 />
 ))}
 <Route
  key={RouteConfig.length}
  path="*"
  render={({ location }) => {
   return (
       <SuspenseContainer>
          <PageNotFound from={location.pathname} />
       </SuspenseContainer>
      );
    }}
   />
</Switch>

在所有路由上均没有匹配404路由渲染：react-router-dom

2 个答案: