反应路由器dom v5默认路由不起作用答案

【问题标题】：React router dom v5 default route doesn't work反应路由器dom v5默认路由不起作用
【发布时间】：2020-12-25 07:01:08
【问题描述】：

我正在使用带有材料 ui 的反应路由器 dom v5，并且我的路由方式如下：

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 屏幕。

【问题讨论】：

您好，这对我来说似乎是一个有趣的问题。感谢您分享您已经尝试过的解决方案。我的猜测是，当您尝试“假路由”时，您实际上并没有键入或机械重定向，而是您尝试从 Layout 组件尝试在组件内重定向它。我说的对吗？
嗨@GiorgiGvimradze，我在我定义的路线之一，即Layout 组件内部，我想从那里加载NotFound 组件。想象一下，我在一条名为/home 的路线上，即在Layout 的内部，然后您在网址上键入/home/random-text，然后我不会被重定向到NotFound 屏幕。我能做什么？
stackoverflow.com/questions/69162456/…。有人也可以回答这个问题吗？

标签： javascript reactjs typescript react-router react-router-dom

【解决方案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>

*对于你的路由对象数组，Component 属性必须是大写的C。

您可以查看此sample 代码。

【讨论】：

感谢您的解释?，它现在可以工作了，所以问题是Switch 的孩子是另一个组件而不是Route?
嗨@rubenmondom，是的，没错！ *我的示例代码链接错误。我刚刚更正了，抱歉。
@LuisPauloPinto 你也能回答我的问题吗？ stackoverflow.com/questions/69162456/…