反应路由器 v4。如何在路线之间导航？

Question

路由不起作用。

它只在 / 上渲染第一个组件 Cloud，但是当我在其中添加其他路由时不起作用

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

只需在路径前面放一个/，即

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