React路由器不斷在匹配的路由中渲染不匹配的路由

Question

我有以下文檔版本：“^5.2.0”，

這是我的代碼：

import PrivateRoute from './PrivateRoute'
import PublicRoute from './PublicRoute'
import { Route } from 'react-router-dom'
import NotFound from 'page/NotFound'
import Router from './router'

const RouteWrapper = () => (
  <React.Fragment>
    <Route path='*' component={NotFound} />
    {
      Router.map((props) => (
        props.private ? (
          <PrivateRoute key={props.path} {...props} />
        ) : (
          <PublicRoute key={props.path} {...props} />
        )
      ))
    }
  </React.Fragment>
)

export default RouteWrapper

在 App.jsx 中

import { BrowserRouter as Router, Switch } from 'react-router-dom'
import { ScrollReset, AuthGuard } from 'utils'
import RouteWrapper from 'router/route_wrapper'

const App = () => (
  <Router basename='/'>
    <ScrollReset />
    <AuthGuard />
    <Switch>
      <RouteWrapper />
    </Switch>
  </Router>
)

export default App

NotFound.jsx：

const NotFound = () => (
  <div>Page Not Found</div>
)

export default NotFound

當路由不匹配時，我創建未找到路由來處理錯誤，但該路由始終呈現在每個匹配的路由中。 有什么建議嗎？

截屏

Answer 1

在檢查是否有任何路由路徑匹配時，未找到的路由路徑應該是最后一個。

    import PrivateRoute from './PrivateRoute'
    import PublicRoute from './PublicRoute'
    import { Route } from 'react-router-dom'
    import NotFound from 'page/NotFound'
    import Router from './router'
    
    const RouteWrapper = () => (
      <React.Fragment>
        {
          Router.map((props) => (
            props.private ? (
              <PrivateRoute key={props.path} {...props} />
            ) : (
              <PublicRoute key={props.path} {...props} />
            )
          ))
        }
      <Route path='*' component={NotFound} />
      </React.Fragment>
    )
    
    export default RouteWrapper