javascript - warning.js:36 警告：失败的道具类型：道具“历史”在“路由器”中标记为必需，但其值为“未定义”

Question

根据以下代码获取标题中的错误：

import React from 'react'
// import { browserHistory, hashHistory, Router } from 'react-router'
// import createMemoryHistory from 'history/lib/createMemoryHistory'
import { browserHistory, hashHistory, Router, Route, Switch } from 'react-router-dom'
import Portfolio from './portfolio/Portfolio'
import Home from './home/Home'
import NoMatch from './NoMatch'

// const history = createMemoryHistory(location);
// console.log('history', history);

const Routes = () => {
    return (
        <Router history={browserHistory}>
            <Route exact={ true } path="/" component={ Home }/>
            <Route exact={ true } path="/portfolio" component={ Portfolio }/>
            <Route component={ NoMatch } />
        </Router>
    );
}

export default Routes

Answer 1

从 react-router-dom version4.0 开始，将 Router 替换为 BrowserRouter 并使用 Switch，Router 不能有多个子节点。

import { browserHistory, hashHistory, BrowserRouter, Route, Switch } from 'react-router-dom';

并用以下代码替换路线：

const Routes = () => {
        return (
            <BrowserRouter history={browserHistory}>
             <Switch>
                <Route exact={ true } path="/" component={ Home }/>
                <Route exact={ true } path="/portfolio" 
                       component={ Portfolio }/>
                <Route component={ NoMatch } />
             </Switch>
            </BrowserRouter>
        );
    }