React Router

Router：路由
目前有三种方法来控制路由

1. window.location.hash = '路由地址'  //推荐使用
2. window.location.pathname =  '路由地址'  //不推荐使用，会刷新页面
3. window.history.pushState(null,'','路由地址') //不是很推荐，需要后端将所有路径都指向首页

要想使用React Router,先引入react-router-dom依赖，然后在js里

import { BrowserRouter as Router, Route, Link } from "r··eact-router-dom";

现在就可以使用了

import React from "react";
import ReactDOM from "react-dom";
import { useState, useEffect } from "react";
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 Box3() {
  return <div className="box">欢迎</div>;
}
function App() {
  return <div className="box">App</div>;
}

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