Question

我正在将React路由器dom v5与材料ui一起使用，并且通过以下方式获得路线：

import React from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Layout from '../components/layout'
import Login from '../screens/Login'
import NotFound from '../screens/NotFound'
import routes from './routes'

const DynamicRoutes = () => {
  return (
    <>
      {Object.values(routes).map(({ component, path }) => (
        <Route exact path={path} key={path} component={component} />
      ))}
    </>
  )
}

const Router = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/login" component={Login} />
        <Layout>
          <DynamicRoutes />
        </Layout>
        <Route path="*" component={NotFound} />
      </Switch>
    </BrowserRouter>
  )
}

export default Router

我已经尝试过<Route component={NotFound} />，但都没有对我有用。谁能帮我？其余路由可以正常工作，但是当我输入假路由时，不会进入NotFound屏幕。

Answer 1

之所以会这样，是因为<Switch>的所有子代都应该是<Route>或<Redirect>元素。您可以在react-router-dom docs中查看有关此内容的更多信息。

因此，您的代码的一种解决方案是执行以下操作：

<BrowserRouter>
      <Switch>
        <Route exact path="/login" component={Login} />
        {Object.values(routes).map(({ Component, path }) => (
          <Route exact path={path} key={path}>
            <Layout>
              <Component />
            </Layout>
          </Route>
        ))}
        <Route path="*" component={NotFound} />
      </Switch>
</BrowserRouter>

*对于您的routes对象数组，Component属性必须带有上面的C。

您可以检查此sample代码。

React Router dom v5默认路由不起作用

1 个答案: