warning.js:36 Warning: Failed prop type: prop `history` 在 `Router` 中被标记为 required，但其值为 `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

用BrowserRouter替换Router并使用Switch 从react-router-dom version4.0开始，Router不能有超过1个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>
        );
    }

warning.js:36 Warning: Failed prop type: prop `history` 在 `Router` 中被标记为 required，但其值为 `undefined`

warning.js:36 Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`

javascript

reactjs

react-router

react-router-dom