1.什么是Router

路由（Routing）就是把信息从源地址传输到目的地址的活动。

在前端通过修改页面路径实现Router时有三种方法可以不刷新页面就能达到不同的URL的方法：

1.1 第一种 window.loaction.hash 方法：

使用方法：首先定义hash ,在使用useState获取hash,渲染不同页面时对应不同的hash

  
function App() {
  let hash = window.location.hash;
  let initUi = hash === "signup" ? "登录" : "注册";
  let [ui, setUi] = useState(initUi);
  let onClickLogin = () => {
    setUi("登录");
    window.location.hash("/login");
  };
  let onClickSignUp = () => {
    setUi("注册");
    window.location.hash("/signup");
  };

  return (
    <div className="App">
      <button onClick={onClickLogin}>登录</button>
      <button onClick={onClickSignUp}>注册</button>
      <div>{ui === "注册" ? <Box1 /> : <Box2 />}</div>
    </div>
  );
}

1.2 第二种 window.loaction.pathname 方法：

这种方法会刷新页面，所以不推荐使用

1.3 第三种 window.history.pushState方法：

【注意】
* 后端将所有路径都向前端时才使用这个方法
* 如果后端程序员水平低，不满足上一条时不能使用
* 另一种条件下，可以使用该方法，就是自己写后端。

window.history.pushState的使用方法举例：

function App() {
  let hash = window.location.hash;
  let initUi = hash === "#signup" ? "登录" : "注册";
  let [ui, setUi] = useState(initUi);

  let onClickLogin = () => {
    setUi("登录");
    window.history.pushState(null, " ", "/login");
  };

  let onClickSignUp = () => {
    setUi("注册");
    window.history.pushState(null, " ", "/signup");
  };

  return (
    <div className="App">
      <button onClick={onClickLogin}>登录</button>
      <button onClick={onClickSignUp}>注册</button>
      <div>{ui === "注册" ? <Box1 /> : <Box2 />}</div>
    </div>
  );
}

以上三种方法用法相似，其中第三种方法时专门用来做Router的方法。

• 实现三种路由的方法：

function Box1() {
  return <div className="box">注册</div>;
}

function Box2() {
  return <div className="box">登录</div>;
}
function Welcome() {
  return <div className="box">欢迎</div>;
}

function App() {
  let path = window.location.pathname;
  let initUi = path === "";
  if (initUi === "/welcome") {
    initUi = "欢迎";
  } else if (initUi === "/login") {
    initUi = "登录";
  } else {
    initUi = "注册";
  }
  let [ui, setUi] = useState(initUi);

  let onClickLogin = () => {
    setUi("登录");
    window.history.pushState(null, " ", "/login");
  };

  let onClickSignUp = () => {
    setUi("注册");
    window.history.pushState(null, " ", "/signup");
  };
  let onClickWelcome = () => {
    setUi("欢迎");
    window.history.pushState(null, " ", "/welcome");
  };
  let showUi = () => {
    if (ui === "登录") {
      return <Box2 />;
    } else if (ui === "注册") {
      return <Box1 />;
    } else {
      return <welcome />;
    }
  };

  return (
    <div className="App">
      <button onClick={onClickLogin}>登录</button>
      <button onClick={onClickSignUp}>注册</button>
      <button onClick={onClickWelcome}>欢迎</button>
      <div>{showUi()}</div>
    </div>
  );
}

这种方法存在缺陷： 如果URL太多了使用循环语句太麻烦，下面来介绍以下攻克这个问题的方法：react router（正则表达式）

---

2. react-router

是完整的 React 路由解决方案，保持UI 与URL 同步，地址栏变页面就变，页面变地址栏响应地改变。

2.1 安装和配置 react-router

1. 如果在浏览器使用路由，则推荐安装 react-route-dom npm安装链接【https://reacttraining.com/react-router/web/guides/quick-start】
2. 引入变量

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

3. ReactDOM.render函数中最顶端创建 <Router></Router>组件，然后在这个组件中创建<Link to="/URL">About</Link> 组件和<Route path="/URL"></Route>组件，最后在<Route></Route>组件中在创建页面中想要现实的组件；别忘了声明函数组件

function Users() {
  return <h2>Users</h2>;
}

具体用法示例：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import {
  BrowserRouter as Router,
  Route,
  Link,
} from "react-router-dom";

import "./styles.css";

function Box1() {
  return <div className="box">注册</div>;
}

function Box2() {
  return <div className="box">登录</div>;
}
function Welcome() {
  return <div className="box">欢迎</div>;
}

function App() {
  return <div className="App">APP</div>;
}

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Router>
      <div>
        <div>
        <Link to="/"><button>首页</button></Link> |
        <Link to="/login"><button>注册</button></Link> |
        <Link to="/signup">登录</Link> |
        <Link to="/welcome">欢迎</Link>
        </div>
        <Route path="/" exact component={App} />
        <Route path='/login' component={Box1} />
        <Route path='/signup' component={Box2} />
        <Route path='/welcome' component={Welcome} />
      </div>
    </Router>,
  rootElement
);