反応ルータ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> 
 
);

私はルータ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')); 

希望します。ハッピーコーディング！