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}/>

React-router v4。如何在路线之间导航？

1 个答案: