react-route-dom的一些写法

1 Switch组件只会渲染匹配上的 第一个【如果多个路由被匹配上了！！】

2 填写 组件名【不是字符串形式】 到 Route组件的 component 属性

和

Route组件包住当前路由下要渲染 的组件 也可以， 效果是一样的！！！

 

import React from 'react';

import {
  BrowserRouter as Router,
  Switch, // 用来抱住
  Route,
  Link
} from "react-router-dom";

const nav_list = [{
  name: 'A',
  to: '/A',
  com: A,
},{
  name: 'B',
  to: '/B',
  com: B,
},{
  name: 'C',
  to: '/C',
  com: C,
}];

function A() {
  return (
    <div>我是A</div>
  )
}
function B() {
  return (
    <div>我是B</div>
  )
}
function C() {
  return (
    <div>我是C</div>
  )
}


export default function App() {
  return (
    <Router>
      <div>
        <ul>
          {
            nav_list.map(item => <li>
              <Link to={item.to}>{item.name}</Link>
            </li>)
          }
        </ul>
      </div>

      <Switch>
      {
        nav_list.map(item => <Route path={item.to} component={item.com}>
        </Route>)
      }
    </Switch>

      <Switch>
        <Route path="/A">
          <A />
        </Route>
        <Route path="/B">
          <B />
        </Route>
        <Route path="/C">
          <C />
        </Route>
      </Switch>
    </Router>
  );
}