//1.安装库
npm i react-router-dom
//2.<Router>在根组件上包裹所有内容组件
<Router>
//3.<Link点击跳转到目标组件页面
<Link to="/first">页面一</Link>定义一个跳转链接
//4.<Routes>包裹具体的路由定义
 <Routes>
  <Route path="/first" element={<First/>}/>
</Routes>

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

// import {HashRouter as Router, Route, Link, Routes} from "react-router-dom"

const First = () => {
  return (
      <p>这是First组件页面</p>
  )
}

class RouterApp extends React.Component{
  render() {
    return (
        <Router>
          <div>
            路由主页
            <Link to="/first">页面一</Link>
            <Routes>
              <Route path="/first" element={<First/>}/>
            </Routes>
          </div>
        </Router>
    );
  }
}

class RouterApp extends React.Component{
  render() {
    return (
        <Router>
          <div>
            路由主页
            <Link to="/first">页面一</Link>
            <Routes>
              <Route path="/first" element={<First/>}/>
              <Route path={"/"} element={<Login/>}/>
            </Routes>
          </div>
        </Router>
    );
  }
}

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

// import {HashRouter as Router, Route, Link, Routes} from "react-router-dom"

location.pathname
'/first'

<Link to="/first">页面一</Link>

<Routes>
  <Route path="/first" element={<First/>}/>
</Routes>

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

// import {HashRouter as Router, Route, Link, Routes} from "react-router-dom"


const First = () => <p>这是First组件页面</p>
const Home = () => <h2>这是home主页</h2>

class RouterApp extends React.Component{
  render() {
    return (
        <Router>
          <div>

            <Routes>
              <Route path="/first" element={<First/>}/>
              <Route path={"/home"} element={<Home/>}/>
            </Routes>
            路由主页
            <br/>
            <Link to="/first">页面一</Link>
            <br/>
            <Link to={"/home"}>Home主页</Link>
          </div>
        </Router>
    );
  }
}

class Login extends React.Component{
  handleClick = () => {
    //history是在Routes选择route展示组件时，自动传入的。  
    //this.props.history.push("/manager")  
      
    let history = useHistory()
    history.push("/manager")
  }

  render() {
    return (
        <div>
          登录页面
          <button onClick={this.handleClick}>点击登录</button>
        </div>
    );
  }
}

const Manager = (props) => {
  let history = useHistory()

  const handleClick = () => {
    history.go(-1)
  }

  return (
      <div>
        管理后台
        <button onClick={handleClick}>返回到登录页面</button>
      </div>
  )
}

<Route exact path={"/"} element={<Login/>}/>

useHistory用法
import { useHistory } from "react-router-dom";  //引入

 //使用:
// history.push({path:"/home"}); 也可以是对象 还可以传值 params,state,search 都能传 。
 const history = useHistory();
 history.push("/home"); 

useNavigate用法
import { useNavigate } from "react-router-dom"; 
  

const navigate = useNavigate();
navigate.push("/home");