[英]ReactJS react-router-dom ^5.3.0 not rendering components
我在沒有包裝Switch
的BrowserRouter
組件的情況下使用此代碼,它運行良好。 什么時候進行了一些玩笑測試,我得到了以下錯誤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
package 內部(這個./components/${route.component}
應該是您的組件的路徑)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.