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

Question

我关注docs 版本：“^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

当路由不匹配时，我创建未找到的路由来处理错误，但路由总是在每个匹配的路由中呈现。 有什么建议吗？

Screenshot

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