React - Router 路由的使用

一. 基本使用

1. 安装 Router
npm add react-router-dom@5

2. <App /> 的最外侧包裹 <BrowserRouter></BrowserRouter> 或 <HashRouter></HashRouter>
   BrowserRouter： 浏览器的路由方式，也就是在开发中最常使用的路由方式
   HashRouter：在路径前加入#号成为一个哈希值

   import React from "react";
   import ReactDOM from 'react-dom'
   import { BrowserRouter } from "react-router-dom/";
   import App from './App'
   ReactDOM.render(
       <BrowserRouter>
           <App />
       </BrowserRouter>,
       document.getElementById("root")
   )
   

3. 使用路由

   // 引入插件
   import React, { Component } from 'react'
   import { Link, Route } from 'react-router-dom'
   // 引入组件地址
   import Home from './components/Home'
   import About from './components/About'
   

   {/* 路由跳转 */}
   <Link to="/about">About</Link>
   <Link to="/home">Home</Link>
   

   {/* 注册路由 */}
   <Route path='/about' component={About} />
   <Route path='/home' component={Home} />
   

二. 路由跳转实例

import React, { Component } from "react";
import { Link, Route } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
export default class App extends Component {
  render() {
    return (
      <div style={{ width: "100%", height: "100%", display: "flex" }}>
        <div style={{ width: "200px", height: "100%", borderRight: "1px solid", boxSizing: "border-box", }}>
          {/* 路由跳转 */}
          <Link className="active" to="/about">About</Link><br />
          <Link className="active" to="/home">Home</Link>
        </div>
        <div style={{ width: "calc(100% - 200px)", height: "100%" }}>
          {/* 注册路由 */}
          <Route path="/about" component={About} />
          <Route path="/home" component={Home} />
        </div>
      </div>
    );
  }
}