一个简单的路由结构

index.js

import { BrowserRouter as Router, Link, Route } from 'react-router-dom';

import PhotoPageLayout from '../layout/photo-page-layout';
import HomePageLayout from '../layout/home-page-layout';
import List from '../layout/home-page-layout';

<Router>
  <div>
        <Link to="/">首页</Link>
        <Link to="/one">一个页面</Link>
        <Link to="/two">另一个页面</Link>
        <Route exact path="/" component={ HomePageLayout } />
        <Route path="/one" component={ PhotoPageLayout } />
        <Route path="/two" component={ List } />
    </div>
</Router>

⚠️<Router>里面只能出现一个子节点 ⇒ A <Router> may have only one child element

❌的示范
<Router>
    <div></div>
    <div></div>
</Router>

✅的示范
<Router>
    <div></div>
</Router>

⚠️<Router>里面不能出现<Router>(尤其是将Route 重新写在一个JavaScript文件里面的时候，特别要注意)

index.js

import RouterList from '../router/router';

<Router>
  <div>
        <Link to="/">首页</Link>
        <Link to="/one">一个页面</Link>
        <Link to="/two">另一个页面</Link>
        <RouterList />
    </div>
</Router>

router.js

import React from 'react';

import PhotoPageLayout from '../layout/photo-page-layout';
import HomePageLayout from '../layout/home-page-layout';
import List from '../layout/home-page-layout';

import { Route } from 'react-router-dom';

const RouterList = () => (

❌的示范--------------------------------------------------
  <Router>
    <Route exact path="/" component={ HomePageLayout } />
    <Route path="/two" component={ photoPageLayout } />
  </Router>
---------------------------------------------------------

✅的示范--------------------------------------------------
  <div>
    <Route exact path="/" component={ HomePageLayout } />
    <Route path="/two" component={ photoPageLayout } />
  </div>
---------------------------------------------------------
)
export default RouterList;