react---路由基本使用 + 路由基础属性（两种路由形式：component 、render） + 传参 + 嵌套 +组件分开合并

react 路由

npm i react-router-dom # 安装路由插件

Router  表示所有需要使用路由的部分都必须包含在此节点内部，一个项目只需要有一个此节点就好

此Router有两种常见的形式hash browser，
    hash路由，连接处有个＃，不需要配置，没有兼容，可以直接使用；
    而浏览器历史记录路由需要在web服务器中做特殊配置，兼容性也不好，
    因此不建议使用浏览器历史记录路由。

Route   表示一个路由对象，需要属性 path component

  render方法，可以使用一个组件渲染路由内容，注意：此种方式渲染的组件是没有路由相关的属性信息传递的，需要使用widthRouter方法把路由属性带到组件内部

Link    生成一个a标签

App.js
传参、基本使用、
两种路由形式：component和render、
组件写一起，组件分开写–合并

import React from "react";
import {
      HashRouter as Router, Route, Link,/* withRouter */ } from "react-router-dom";
import {
      Button } from "antd";
import List from "./components/List";
import "./App.css";
import People from "./components/People";
/* 2️⃣2️⃣路由形式2的组件写在不同的页面用法 */
import About from "./pages/About";

const Home = (props) => {
     
  const {
      history } = props;
  return (
    <div>
      <h1>首页</h1>
      <Button
        onClick={
     () => {
     
          // 使用编程式跳转---传参
          history.push("/list");
        }}
      >
        列表页
      </Button>
      <Button
        onClick={
     () => {
     
          // 使用编程式跳转---传参
          history.push("/about");
        }}
      >
        关于我们
      </Button>
    </div>
  );
};

/*  1️⃣1️⃣路由形式2的组件写在同一个页面
const About = (props) => {
  console.log(props);
  return 
About us
;
};

// 此处为高阶组件
//  其实就是js中的高阶函数
//  withRouter是一个函数，接收一个组件作为参数，为组件添加一些路由属性信息,返回一个新的组件(也就是把路由属性附加到组件里面)
const AboutPage = withRouter(About); */

function App() {
     
  return (
    <Router>
      <div className="App">
        <ul>
          <li>
            <Link exact to="/">首页</Link>
          </li>
          <li>
            <Link to="/list?t=cart">列表</Link>
          </li>
          <li>
            <Link to="/p">People</Link>
          </li>
        </ul>
        <hr />
        {
     /* Route是一个组件 */}
        <div className="container">
          {
     /* exact 表示完全匹配 */}
          {
     /* 如果不加exact的话 每个页面都会有/那么每个页面都会有Home页这个内容 */}
          {
     /* 路由形式1️⃣component会自带路由属性 */}
          <Route path="/" exact component={
     Home} />
          <Route path="/list" component={
     List} />
          <Route path="/p" component={
     People} />
          {
     /* 2️⃣路由的另一种形式：render方式渲染组件，没有直接使用component指定组件
              这时候在路由对应的组件中没有history和location等路由的属性信息（因为这是默这种形式默认情况下的，就不带这些信息，需要用withRouter）
          */}
          <Route path="/about" render={
     () => <About />} />
        </div>
      </div>
    </Router>
  );
}

export default App;

About.jsx

import React from "react";
import {
      withRouter } from "react-router-dom";

const About = (props) => {
     
  console.log(props);
  return <h1>有什么有什么要联系我们的吗，欢迎您哦</h1>;
};

export default withRouter(About);

List.jsx

import React from "react";
import {
      withRouter } from "react-router-dom";

function List(props) {
     
  console.log(props);
   // 路由组件中会包含
  //    history
  //    location
  //    match
  // 此处可以使用new URLSearchParams获取当前查询条件
  //  使用模块qs也能获取查询条件
  const params = new URLSearchParams(props.location.search);
  console.log(params.get("t"));
  return (
    <div>
      <h1>我是一个列表页</h1>
    </div>
  );
}

export default withRouter(List);

嵌套

import React from "react";
import {
      withRouter, Link, Route } from "react-router-dom";

const About = (props) => {
     
  console.log(props);
  return (
    <div>
      <h1>About us</h1>
      <Link to="/about/ygfc">【员工风采】</Link>
      <Link to="/about/gstd">【公司团队】</Link>
      <Link to="/about/qywh">【企业文化】</Link>
      <hr />
      {
     /* 没有用component是因为不想再定义一个，想偷懒举例，所以用的render */}
      <Route path="/about/ygfc" render={
     () => <h1>员工风采</h1>} />
      <Route path="/about/gstd" render={
     () => <h1>公司团队</h1>} />
      <Route path="/about/qywh" render={
     () => <h1>企业文化</h1>} />
    </div>
  );
};

export default withRouter(About);