从React Router 3更新到4.1.1，我如何将路由与app.jsx分开？

Question

在React Router 3.0.5中，站点工作正常，但是当我尝试更新到React Router 4.1.1时，出现了一些错误。 我正在尝试将主路径设置为“ /”，以将其转到应用程序组件，否则将其转到列出的其他组件。

我收到警告错误：道具类型失败：道具history在Router标记为必需，但其值undefined 。 在路由器中

和此错误：Router.js：31未捕获的TypeError：无法读取未定义的属性“位置”

这是我的代码App.jsx：

 import React from 'react'; import LeftPane from './LeftPane.jsx'; import RightPane from './RightPane.jsx'; import CenterPane from './CenterPane.jsx'; import TopPane from './TopPane.jsx'; import Models from './Models.jsx'; import Projects from './Projects.jsx'; import Contact from './Contact.jsx'; import Router from 'react-router'; import axios from 'axios'; class App extends React.Component { constructor() { super(); this.state = { modelBucket: [] }; } componentWillMount() { axios({ method: 'POST', url: '/modelcall' }) .then((response) => { console.log('this is the axios call from models.jsx (the response) :', response); this.setState({modelBucket: response}); }) .catch((error) => { console.log('this is an error from the axios call in models.jsx', error); }); } render() { return ( <div> <div className="container-fluid"> <div> <TopPane /> </div> <div className="container-fluid text-center"> <div className="row content"> <div className="col-sm-12 text-center"> {this.props.children} </div> </div> </div> </div> </div> ); } } export default App; 

这是我的routes.js页面：

 import React from 'react'; import { BrowserRouter as Router, Route} from 'react-router-dom'; import App from './components/App.jsx'; import Models from './components/Models.jsx'; import Projects from './components/Projects.jsx'; import Contact from './components/Contact.jsx'; import About from './components/About.jsx'; import CenterPane from './components/CenterPane.jsx'; export default ( <Router exact path="/" component={App}> <Route path="/models" component={Models} /> <Route path="/projects" component={Projects} /> <Route path="/contact" component={Contact} /> <Route path="/about" component={About} /> </Router> ); 

我尝试在线阅读一些有关React Router 4.1.1的教程，但似乎每个教程都略有不同。 有些使用BrowserRouter，有些使用hashRouter，有些只是使用Router ....我迷路了。

任何帮助，将不胜感激。

Answer 1

好吧，应该是这样的。 确保从最具体到最通用的顺序列出它们。 无论如何，浏览器历史记录和哈希历史记录也存在于以前的版本中。 无论如何，哈希历史记录是首选方法。

import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';


ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div>
        <Switch>
            <Route path="/models" component={Models} />
            <Route path="/projects" component={Projects} />
            <Route path="/contact" component={Contact} />
            <Route path="/about" component={About} />
            <Route path="/" component={App} />
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>
  , document.querySelector('.container'));

希望这可以帮助。 编码愉快！