react-router-dom的组件最新写法

1: Switch改为 Routes作用就是防止重复匹配，只匹配匹配到的对应的路由，防止性能浪费

v5版本的写法

	import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';
       <BrowserRouter>
        <ul>
          <li><Link to="/">首页</Link></li>
          <li><Link to="/about">关于我们</Link></li>
          <li><Link to="/login">登录页</Link></li>
        </ul>
          <Switch> 
          <Route path="/" exact component={Home}></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/login" component={Login}></Route>
        </Switch>
        </BrowserRouter>

v6版本的写法

	import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
       <BrowserRouter>
        <ul>
          <li><Link to="/">首页</Link></li>
          <li><Link to="/about">关于我们</Link></li>
          <li><Link to="/login">登录页</Link></li>
        </ul>
        <Routes> 
          {/* v6的写法 Switch被 Routes代替 component被element代替 */}
          <Route path="/" element={<Home/>}></Route>
          <Route path="/about" element={<About/>}></Route>
          <Route path="/login" element={<Login/>}></Route>
        </Routes>
        </BrowserRouter>

效果如下

2: 路由重定向 Redirect改为 Navigate

• home.js

 import React, { Component } from 'react'
import { Navigate } from 'react-router-dom'
export default class Home extends Component {
  render() {
    return (
      <div>
        <h1>Home页面</h1>
        {/* 重定向某个页面 */}
        <Navigate to="/login"></Navigate>
      </div>
    )
  }
}

效果如下