リアクタールータv4。ルート間の移動方法

Question

ルーティング機能が動作しません。

それは私が間違って何をやっている/上の唯一の最初のコンポーネントのクラウドをレンダリングしますが、私はdoesnの `tの仕事で他のルートを追加

import React from 'react'; 
import {render} from 'react-dom'; 
import { BrowserRouter as Router, Route } from 'react-router-dom' 
import createBrowserHistory from 'history/createBrowserHistory'; 

// import components 
import Cloud from './components/Cloud'; 
import Dashboard from './components/Dashboard'; 
import Contacts from './components/Contacts'; 
import Account from './components/Account'; 
import Login from './components/Login'; 
import Sidebar from './components/Sidebar'; 
import Header from './components/Header'; 
import Footer from './components/Footer'; 

const history = createBrowserHistory(); 

const App = (props) => { 
return (
    <Router history={history}> 
     <section> 
      <Sidebar/> 
      <div className="main-content"> 
       <Header/> 
       <div id="page-wrapper"> 
        <Route exact path="/" component={Cloud}/> 
        <Route path="/dashboard" component={Dashboard}/> 
        <Route path="/contacts" component={Contacts}/> 
        <Route path="/account" component={Account}/> 
       </div> 
      </div> 
      <Footer/> 
     </section> 
    </Router> 
    ); 
}; 

render(<App/>, document.getElementById('root')); 

？ screenshotとscreenshot2

また、ユーザーのCookieが期限切れになった場合、/ homeと/ loginルート間をどのようにジャンプできますか？

Answer 1

はちょうどそれが助けをwon`t、すなわち、あなたのパスの前に

<Route exact path="/" component={Cloud}/> 
<Route path="/dashboard" component={Dashboard}/> 
<Route path="/contacts" component={Contacts}/> 
<Route path="/account" component={Account}/>