javascript - warning.js :36 Warning: Failed prop type: The prop `history` is marked as required in `Router` , 但其值为 `undefined`

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版本4.0开始，用BrowserRouter替换Router并使用Switch，Router不能有多个 child 。

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>
        );
    }