Reactor-Router v4. Wie navigiere ich zwischen den Routen?

Question

Routing funktioniert nicht.

Es macht nur die erste Komponente Cloud auf /, aber wenn ich andere Routen in doesn `t Arbeit

hinzufügen

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')); 

Was mache ich falsch? screenshot

Und wie man zwischen/home und/login Routen springt, wenn Benutzer Cookies abgelaufen?

Answer 1

Einfach ein / vor Ihrem Weg, das heißt,

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