ReactJS react-router-dom ^5.3.0 不渲染组件

Question

我在没有 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>
</>

Answer 1

这应该按预期工作：

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} 应该是您组件的路径）

ReactJS react-router-dom ^5.3.0 不渲染组件

ReactJS react-router-dom ^5.3.0 not rendering components

javascript

router

reactjs

react-router

react-router-dom