Javascript React路由器dom v5默认路由不';行不通
我将react router dom v5与material ui一起使用,我的路由如下所示:Javascript React路由器dom v5默认路由不';行不通,javascript,reactjs,typescript,react-router,react-router-dom,Javascript,Reactjs,Typescript,React Router,React Router Dom,我将react router dom v5与material 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/
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
从“React”导入React
从“react router dom”导入{BrowserRouter,Route,Switch}
从“../components/Layout”导入布局
从“../screens/Login”导入登录名
从“../screens/NotFound”导入NotFound
从“/routes”导入路由
常量炸药=()=>{
返回(
{Object.values(routes.map)({component,path})=>(
))}
)
}
常数路由器=()=>{
返回(
)
}
导出默认路由器
我已经尝试过
,但都没有成功。有人能帮我吗?其余的路由工作正常,但当我键入假路由时,不会转到未找到屏幕。发生这种情况,因为
的所有子元素都应该是
或
元素。
您可以在react路由器dom中查看更多信息
因此,代码的一个解决方案是这样做:
<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>
{Object.values(routes.map)({Component,path})=>(
))}
*对于routes对象数组,Component属性必须具有较高的C
您可以查看此代码。您好,这对我来说是个有趣的问题。感谢分享您已经尝试过的解决方案。我的猜测是,当您尝试“伪路由”时,实际上您不会键入或机械地重定向,但您可以通过尝试在组件内部重定向来从布局
组件尝试重定向。我说得对吗?您好@GiorgiGvimradze,我在我定义的一条路径中,即Layout
组件的内部,我想从那里加载NotFound
组件。假设我在一条名为/home
的路线上,该路线位于布局的内部,然后您键入url/home/random text
,然后我不会被重定向到NotFound
屏幕。我能做什么?谢谢你的解释嗨@rubenmondom,是的,没错*我的示例代码带有错误的链接。我刚刚纠正了,对不起。