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

Posted 2023-02-22

【中文标题】反应路由器dom v5默认路由不起作用

【英文标题】：React router dom v5 default route doesn't work

【发布时间】：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 屏幕。我能做什么？

***.com/questions/69162456/…。有人也可以回答这个问题吗？

【参考方案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 你也能回答我的问题吗？ ***.com/questions/69162456/…