ReactJS react-router-dom ^5.3.0 不渲染组件
ReactJS react-router-dom ^5.3.0 not rendering components
我在没有 BrowserRouter
组件包装 Switch
的情况下使用此代码并且它运行良好。什么时候进行一些开玩笑的测试时,我得到以下错误 Invariant failed: Browser history needs a DOM
,它表示 Link
组件不能在路由器外部使用。确实,我没有使用路由器。当我添加路由器时,url 正在更改,但组件没有正确重新显示。我做对了吗?
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
export const _routes = [
{
component: Home,
path: '/',
exact: true
},
{
component: Orders,
path: '/orders',
exact: false
},
{
component: OrderConfirm,
path: '/order-confirm',
exact: false
}
]
const App = () => <>
<Navbar />
<Router>
<Switch>
{_routes.map(route => <Route key={route.path} path={route.path} component={route.component} exact={route.exact} />)}
</Switch>
</Router>
</>
这应该按预期工作:
export const _routes = [
{
component: 'Home',
path: '/',
exact: true
},
{
component: 'Orders',
path: '/orders',
exact: false
},
{
component: 'OrderConfirm',
path: '/order-confirm',
exact: false
}
]
const App = () => <>
<Navbar />
<Router>
<Switch>
{_routes.map(route => <Route key={route.path} path={route.path} component=require(`./components/${route.component}`).default exact={route.exact} />)}
</Switch>
</Router>
</>
我假设您的组件在 components
包内(这个./components/${route.component}
应该是您组件的路径)
我在没有 BrowserRouter
组件包装 Switch
的情况下使用此代码并且它运行良好。什么时候进行一些开玩笑的测试时,我得到以下错误 Invariant failed: Browser history needs a DOM
,它表示 Link
组件不能在路由器外部使用。确实,我没有使用路由器。当我添加路由器时,url 正在更改,但组件没有正确重新显示。我做对了吗?
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
export const _routes = [
{
component: Home,
path: '/',
exact: true
},
{
component: Orders,
path: '/orders',
exact: false
},
{
component: OrderConfirm,
path: '/order-confirm',
exact: false
}
]
const App = () => <>
<Navbar />
<Router>
<Switch>
{_routes.map(route => <Route key={route.path} path={route.path} component={route.component} exact={route.exact} />)}
</Switch>
</Router>
</>
这应该按预期工作:
export const _routes = [
{
component: 'Home',
path: '/',
exact: true
},
{
component: 'Orders',
path: '/orders',
exact: false
},
{
component: 'OrderConfirm',
path: '/order-confirm',
exact: false
}
]
const App = () => <>
<Navbar />
<Router>
<Switch>
{_routes.map(route => <Route key={route.path} path={route.path} component=require(`./components/${route.component}`).default exact={route.exact} />)}
</Switch>
</Router>
</>
我假设您的组件在 components
包内(这个./components/${route.component}
应该是您组件的路径)