Блог

у меня есть следующая версия документа: «^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
 

в приложении.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
 

Не найдено.jsx:

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

export default NotFound
 

я создаю не найденный маршрут для обработки ошибки, когда маршрут не совпадает, но маршрут всегда отображается в каждом совпадающем маршруте.
есть какие-нибудь предложения?

Скриншот

Не найденный путь маршрута должен быть последним при проверке соответствия любого пути маршрута.

     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