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

Question

在 React Router 3.0.5 中，网站运行良好，但是当我尝试更新到 React Router 4.1.1 时，出现了一些错误。我试图让主路由为“/”，它会转到应用程序组件，否则它会转到列出的其他组件。

我收到错误警告:失败的 Prop 类型: Prop history在Router中被标记为必需，但其值为未定义 。 在路由器中

和这个错误:Router.js:31未捕获类型错误:无法读取未定义的属性“位置”

这是我的代码应用程序.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'));

希望这有帮助。快乐编码!