• [尚硅谷React笔记]——第5章 React 路由

    目录：

    1. 对SPA应用的理解
    2. 对路由的理解
    3. 前端路由原理
    4. 路由的基本使用
    5. 路由组件与一般组件
    6. NavLink的使用
    7. 封装NavLink组件
    8. Switch的使用
    9. 解决样式丢失问题
    10. 路由的模糊匹配与严格匹配
    11. Redirect的使用
    12. 嵌套路由
    13. 向路由组件传递params参数
    14. 向路由组件传递search参数
    15. .向路由组件传递state参数
    16. 总结路由参数
    17. push与repalce
    18. 编程式路由导航
    19. withRouter的作用
    20. BrowserRouter与HashRouter

    1.对SPA应用的理解

    1. 单页Web应用（single page web application，SPA）。
    2. 整个应用只有一个完整的页面。
    3. 点击页面中的链接不会刷新页面，只会做页面的局部更新。
    4. 数据都需要通过ajax请求获取, 并在前端异步展现。

    2.对路由的理解 

    什么是路由?

    1. 一个路由就是一个映射关系(key:value)
    2. key为路径, value可能是function或component

    路由分类

    1. 后端路由：
      1. 理解： value是function, 用来处理客户端提交的请求。
      2. 注册路由： router.get(path, function(req, res))
      3. 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
    2. 前端路由：
      1. 浏览器端路由，value是component，用于展示页面内容。
      2. 注册路由:
      3. 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件

    3.前端路由原理

    前端路由的基石.html 

    2. "en">
    3. <head>
    4.   "UTF-8">
    5.   前端路由的基石_history
    8. 	"http://www.atguigu.com" onclick="return push('/test1') ">push test1

    9. 	

    10. 	

    11. 	
    12. 	
    13.  
    14. 	
    15.

     4.路由的基本使用

    1. 明确好界面中的导航区、展示区
    2. 导航区的a标签改为Link标签 Demo
    3. 展示区写Route标签进行路径的匹配
    4. 的最外侧包裹了一个或

    App.js

    1. import React, {Component} from 'react';
    2. import {Link, Route} from "react-router-dom";
    3. import About from "./components/About/About";
    4. import Home from "./components/Home/Home";
    5.  
    6. class App extends Component {
    7.     render() {
    8.         return (
    9.             
    10.                 
      "row">
    11.                     
      "col-xs-offset-2 col-xs-8">
    12.                         
      "page-header">
      React Router Demo
    13.
  • "row">
  • "col-xs-2 col-xs-offset-2">
  • "list-group">
  • "list-group-item" to="/about">About
  • "list-group-item" to="/home">Home
  • "col-xs-6">
  • "panel">
  • "panel-body">
  • "/about" component={About}>
  • "/home" component={Home}>
  • );
  • }
  • }
  • export default App;

    • index.js

    1. import React from 'react';
    2. import ReactDOM from 'react-dom/client';
    3. import App from './App';
    4. import {BrowserRouter} from "react-router-dom";
    5.  
    6.  
    7. const root = ReactDOM.createRoot(document.getElementById('root'));
    8. root.render(
    9.     
    10.         
    11.     
    12. );

    About.jsx

    1. import React, {Component} from 'react';
    2.  
    3. class About extends Component {
    4.     render() {
    5.         return (
    6.             
    7.                 
      我是About的内容
    8.             
    9.         );
    10.     }
    11. }
    12.  
    13. export default About;

    Home.jsx

    1. import React, {Component} from 'react';
    2.  
    3. class Home extends Component {
    4.     render() {
    5.         return (
    6.             
    7.                 
      我是Home的内容
    8.             
    9.         );
    10.     }
    11. }
    12.  
    13. export default Home;

    运行结果：

    5.路由组件与一般组件

    1. 写法不同:
      1. 一般组件:
      2. 路由组件:
    2. 存放位置不同:
      1. 一般组件:components
      2. 路由组件: pages
    3. 接收到的props不同:
      1. 一般组件:,写组件标签时传递了什么，就能收到什么
      2. 路由组件:接收到三个固定的属性
        1. history:
           
          1. go: f go(n)
          2. goBack: f goBack()
          3. goForward: f goForward()
          4. push: f push(path,state)
          5. replace: f replace(path, state)

        2. location:

          1. pathname: "/about"
          2. search: ""
          3. state: undefined

        3. match:|

          1. params: {}
          2. path: "/about"
          3. url: "/about"

     6.NavLink的使用

     Header.jsx

    1. import React, {Component} from 'react';
    2.  
    3. class Header extends Component {
    4.     render() {
    5.         // console.log('Header组件收到的props是', this.props)
    6.         return (
    7.             
    8.                 
      "page-header">
      React Router Demo
    9.             
    10.         );
    11.     }
    12. }
    13.  
    14. export default Header;

    About.jsx

    1. import React, {Component} from 'react';
    2.  
    3. class About extends Component {
    4.     render() {
    5.         // console.log('About组件收到的props是', this.props)
    6.         return (
    7.             
    8.                 
      我是About的内容
    9.             
    10.         );
    11.     }
    12. }
    13.  
    14. export default About;

    Home.jsx

    1. import React, {Component} from 'react';
    2.  
    3. class Home extends Component {
    4.     render() {
    5.         return (
    6.             
    7.                 
      我是Home的内容
    8.             
    9.         );
    10.     }
    11. }
    12.  
    13. export default Home;

    App.js

    1. import React, {Component} from 'react';
    2. import {NavLink, Route} from "react-router-dom";
    3. import About from "./pages/About/About";
    4. import Home from "./pages/Home/Home";
    5. import Header from "./components/Header/Header";
    6.  
    7. class App extends Component {
    8.     render() {
    9.         return (
    10.             
    11.                 
      "row">
    12.                     
      "col-xs-offset-2 col-xs-8">
    13.                         
    14.                     
    15.                 
    16.                 
      "row">
    17.                     
      "col-xs-2 col-xs-offset-2">
    18.                         
      "list-group">
    19.                             "atguigu" className="list-group-item" to="/about">About
    20.                             "atguigu" className="list-group-item" to="/home">Home
    21.                         
    22.                     
    23.                     
      "col-xs-6">
    24.                         
      "panel">
    25.                             
      "panel-body">
    26.                                 "/about" component={About}>
    27.                                 "/home" component={Home}>
    28.                             
    29.                         
    30.                     
    31.                 
    32.             
    33.         );
    34.     }
    35. }
    36.  
    37. export default App;

    index.js

    1. import React from 'react';
    2. import ReactDOM from 'react-dom/client';
    3. import App from './App';
    4. import {BrowserRouter} from "react-router-dom";
    5.  
    6.  
    7. const root = ReactDOM.createRoot(document.getElementById('root'));
    8. root.render(
    9.     
    10.         
    11.     
    12. );

    index.html

    2. "en">
    3. <head>
    4.     "utf-8"/>
    5.     <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
    6.     "viewport" content="width=device-width, initial-scale=1"/>
    7.     "theme-color" content="#000000"/>
    8.     
    9.             name="description"
    10.             content="Web site created using create-react-app"
    11.     />
    12.     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
    13.     <link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
    14.     <link rel="stylesheet" href="css/bootstrap.css">
    15.  
    16.     
    17.  
    18.     React App
    22. id="root">

    项目结构：

    运行结果：

     7.封装NavLink组件

    NavLink与封装NavLink

    1. NavLink可以实现路由链接的高亮，通过activeclassName指定样式名
    2. 标签体内容是一个特殊的标签属性
    3. 通过this.props.children可以获取标签体内容

     App.js

    1. import React, {Component} from 'react';
    2. import {NavLink, Route} from "react-router-dom";
    3. import About from "./pages/About/About";
    4. import Home from "./pages/Home/Home";
    5. import Header from "./components/Header/Header";
    6. import MyNavLink from "./components/MyNavLink/MyNavLink";
    7.  
    8. class App extends Component {
    9.     render() {
    10.         return (
    11.             
    12.                 
      "row">
    13.                     
      "col-xs-offset-2 col-xs-8">
    14.                         
    15.                     
    16.                 
    17.                 
      "row">
    18.                     
      "col-xs-2 col-xs-offset-2">
    19.                         
      "list-group">
    20.                             "/about" a={1} b={2} c={3}>About
    21.                             "/home">Home
    22.                         
    23.                     
    24.                     
      "col-xs-6">
    25.                         
      "panel">
    26.                             
      "panel-body">
    27.                                 "/about" component={About}>
    28.                                 "/home" component={Home}>
    29.                             
    30.                         
    31.                     
    32.                 
    33.             
    34.         );
    35.     }
    36. }
    37.  
    38. export default App;

    index.js

    1. import React from 'react';
    2. import ReactDOM from 'react-dom/client';
    3. import App from './App';
    4. import {BrowserRouter} from "react-router-dom";
    5.  
    6.  
    7. const root = ReactDOM.createRoot(document.getElementById('root'));
    8. root.render(
    9.     
    10.         
    11.     
    12. );

    Header.jsx

    1. import React, {Component} from 'react';
    2.  
    3. class Header extends Component {
    4.     render() {
    5.         // console.log('Header组件收到的props是', this.props)
    6.         return (
    7.             
    8.                 
      "page-header">
      React Router Demo
    9.             
    10.         );
    11.     }
    12. }
    13.  
    14. export default Header;

    MyNavLink.jsx

    1. import React, {Component} from 'react';
    2. import {NavLink} from "react-router-dom";
    3.  
    4. class MyNavLink extends Component {
    5.     render() {
    6.         console.log(this.props)
    7.         return (
    8.             
    9.                 "atguigu" className="list-group-item" {...this.props}/>
    10.             
    11.         );
    12.     }
    13. }
    14.  
    15. export default MyNavLink;

    About.jsx

    1. import React, {Component} from 'react';
    2.  
    3. class About extends Component {
    4.     render() {
    5.         // console.log('About组件收到的props是', this.props)
    6.         return (
    7.             
    8.                 
      我是About的内容
    9.             
    10.         );
    11.     }
    12. }
    13.  
    14. export default About;

    Home.jsx

    1. import React, {Component} from 'react';
    2.  
    3. class Home extends Component {
    4.     render() {
    5.         return (
    6.             
    7.                 
      我是Home的内容
    8.             
    9.         );
    10.     }
    11. }
    12.  
    13. export default Home;

    项目结构：

    运行结果：

     

    8.Switch的使用

    1. 通常情况下，path和component是一一对应的关系。
    2. Switch可以提高路由匹配效率(单一匹配)。

    Test.jsx

    1. import React, {Component} from 'react';
    2.  
    3. class Test extends Component {
    4.     render() {
    5.         return (
    6.             
    7.                 
      Test...
    8.             
    9.         );
    10.     }
    11. }
    12.  
    13. export default Test;

    App.js

    1. import React, {Component} from 'react';
    2. import {NavLink, Route, Switch} from "react-router-dom";
    3. import About from "./pages/About/About";
    4. import Home from "./pages/Home/Home";
    5. import Header from "./components/Header/Header";
    6. import MyNavLink from "./components/MyNavLink/MyNavLink";
    7. import Test from "./pages/Test/Test";
    8.  
    9. class App extends Component {
    10.     render() {
    11.         return (
    12.             
    13.                 
      "row">
    14.                     
      "col-xs-offset-2 col-xs-8">
    15.                         
    16.                     
    17.                 
    18.                 
      "row">
    19.                     
      "col-xs-2 col-xs-offset-2">
    20.                         
      "list-group">
    21.                             "/about" a={1} b={2} c={3}>About
    22.                             "/home">Home
    23.                         
    24.                     
    25.                     
      "col-xs-6">
    26.                         
      "panel">
    27.                             
      "panel-body">
    28.                                 
    29.                                     "/about" component={About}>
    30.                                     "/home" component={Home}>
    31.                                     "/home" component={Test}>
    32.                                 
    33.                             
    34.                         
    35.                     
    36.                 
    37.             
    38.         );
    39.     }
    40. }
    41.  
    42. export default App;

    运行结果：

    项目结构：

    9.解决样式丢失问题 

    1. public/index.html 中引入样式时不写./写/（常用)

    2. public/index.html 中引入样式时不写﹒/写%PUBLIC_URL%（常用)

    3. 使用HashRouter

    1../css/bootstrap.css改为：

    <link rel="stylesheet" href="css/bootstrap.css">

    2../css/bootstrap.css改为：

    <link rel="stylesheet" href="%PUBLIC_URL%/css/bootstrap.css">

    3.BroserRouter改成HashRouter

    1. import React from 'react';
    2. import ReactDOM from 'react-dom/client';
    3. import App from './App';
    4. import {BrowserRouter, HashRouter} from "react-router-dom";
    5.  
    6.  
    7. const root = ReactDOM.createRoot(document.getElementById('root'));
    8. root.render(
    9.     
    10.         
    11.     
    12. );

     10.路由的模糊匹配与严格匹配

    1. 默认使用的是模糊匹配(简单记:【输入的路径】必须包含要【匹配的路径】，且顺序要一致)
    2. 开启严格匹配：
    3. 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

     App.js

    1. import React, {Component} from 'react';
    2. import {Route, Switch} from "react-router-dom";
    3. import About from "./pages/About/About";
    4. import Home from "./pages/Home/Home";
    5. import Header from "./components/Header/Header";
    6. import MyNavLink from "./components/MyNavLink/MyNavLink";
    7.  
    8. class App extends Component {
    9.     render() {
    10.         return (
    11.             
    12.                 
      "row">
    13.                     
      "col-xs-offset-2 col-xs-8">
    14.                         
    15.                     
    16.                 
    17.                 
      "row">
    18.                     
      "col-xs-2 col-xs-offset-2">
    19.                         
      "list-group">
    20.                             "/about">About
    21.                             "/home/a/b">Home
    22.                         
    23.                     
    24.                     
      "col-xs-6">
    25.                         
      "panel">
    26.                             
      "panel-body">
    27.                                 
    28.                                     "/about" component={About}>
    29.                                     "/home" component={Home}>
    30.                                 
    31.                             
    32.                         
    33.                     
    34.                 
    35.             
    36.         );
    37.     }
    38. }
    39.  
    40. export default App;

    运行结果：

    11.Redirect的使用

    1. 一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由
    2. 具体编码: 
      2. "/about" component={About}/>
      3. "/home" component={Home}/>
      4. "/about"/>

    App.js

    1. import React, {Component} from 'react';
    2. import {Redirect, Route, Switch} from "react-router-dom";
    3. import About from "./pages/About/About";
    4. import Home from "./pages/Home/Home";
    5. import Header from "./components/Header/Header";
    6. import MyNavLink from "./components/MyNavLink/MyNavLink";
    7.  
    8. class App extends Component {
    9.     render() {
    10.         return (
    11.             
    12.                 
      "row">
    13.                     
      "col-xs-offset-2 col-xs-8">
    14.                         
    15.                     
    16.                 
    17.                 
      "row">
    18.                     
      "col-xs-2 col-xs-offset-2">
    19.                         
      "list-group">
    20.                             "/about">About
    21.                             "/home">Home
    22.                         
    23.                     
    24.                     
      "col-xs-6">
    25.                         
      "panel">
    26.                             
      "panel-body">
    27.                                 
    28.                                     "/about" component={About}>
    29.                                     "/home" component={Home}>
    30.                                     "/about">
    31.                                 
    32.                             
    33.                         
    34.                     
    35.                 
    36.             
    37.         );
    38.     }
    39. }
    40.  
    41. export default App;

    12.嵌套路由

    1. 注册子路由时要写上父路由的path值
    2. 路由的匹配是按照注册路由的顺序进行的

    App.js

    1. import React, {Component} from 'react';
    2. import {Redirect, Route, Switch} from "react-router-dom";
    3. import About from "./pages/About/About";
    4. import Home from "./pages/Home/Home";
    5. import Header from "./components/Header/Header";
    6. import MyNavLink from "./components/MyNavLink/MyNavLink";
    7.  
    8. class App extends Component {
    9.     render() {
    10.         return (
    11.             
    12.                 
      "row">
    13.                     
      "col-xs-offset-2 col-xs-8">
    14.                         
    15.                     
    16.                 
    17.                 
      "row">
    18.                     
      "col-xs-2 col-xs-offset-2">
    19.                         
      "list-group">
    20.                             "/about">About
    21.                             "/home">Home
    22.                         
    23.                     
    24.                     
      "col-xs-6">
    25.                         
      "panel">
    26.                             
      "panel-body">
    27.                                 
    28.                                     "/about" component={About}>
    29.                                     "/home" component={Home}>
    30.                                     "/about">
    31.                                 
    32.                             
    33.                         
    34.                     
    35.                 
    36.             
    37.         );
    38.     }
    39. }
    40.  
    41. export default App;

    Message.jsx

    1. import React, {Component} from 'react';
    2.  
    3. class Message extends Component {
    4.     render() {
    5.         return (
    6.             
    7.                 
      •                     
      •                         "/message1">message001  
      •                     
      •                     
      •                         "/message2">message002  
      •                     
      •                     
      •                         "/message/3">message003  
      •                     
      •                 
      •             
      •         );
      •     }
      • }
      •  
      • export default Message;

       News.jsx

      1. import React, {Component} from 'react';
      2.  
      3. class News extends Component {
      4.     render() {
      5.         return (
      6.             
      7.                 
        •                     
        • news001
        •                     
        • news002
        •                     
        • news003
        •                 
        •             
        •         );
        •     }
        • }
        •  
        • export default News;

        Home.jsx

        1. import React, {Component} from 'react';
        2. import MyNavLink from "../../components/MyNavLink/MyNavLink";
        3. import {Redirect, Route, Switch} from "react-router-dom";
        4. import News from "./News/News";
        5. import Message from "./Message/Message";
        6.  
        7. class Home extends Component {
        8.     render() {
        9.         return (
        10.             
        11.                 
          Home组件内容
        12.                 
        13.                     
            "nav nav-tabs">
        14.                         
        16.                             "/home/news">News
        17.                         
        18.                         
        20.                             "/home/message">Message
        21.                         
        22.                     
        23.                     
        24.                         "/home/news" component={News}>
        25.                         "/home/message" component={Message}>
        26.                         "/home/news">
        27.                     
        28.                 
        29.             
        30.         );
        31.     }
        32. }
        33.  
        34. export default Home;

        MyNavLink.jsx

        1. import React, {Component} from 'react';
        2. import {NavLink} from "react-router-dom";
        3.  
        4. class MyNavLink extends Component {
        5.     render() {
        6.         console.log(this.props)
        7.         return (
        8.             
        9.                 "atguigu" className="list-group-item" {...this.props}/>
        10.             
        11.         );
        12.     }
        13. }
        14.  
        15. export default MyNavLink;

        Header.jsx

        1. import React, {Component} from 'react';
        2.  
        3. class Header extends Component {
        4.     render() {
        5.         // console.log('Header组件收到的props是', this.props)
        6.         return (
        7.             
        8.                 
          "page-header">
          React Router Demo
        9.             
        10.         );
        11.     }
        12. }
        13.  
        14. export default Header;

        About.jsx

        1. import React, {Component} from 'react';
        2.  
        3. class About extends Component {
        4.     render() {
        5.         // console.log('About组件收到的props是', this.props)
        6.         return (
        7.             
        8.                 
          我是About的内容
        9.             
        10.         );
        11.     }
        12. }
        13.  
        14. export default About;

        index.js

        1. import React from 'react';
        2. import ReactDOM from 'react-dom/client';
        3. import App from './App';
        4. import {BrowserRouter, HashRouter} from "react-router-dom";
        5.  
        6.  
        7. const root = ReactDOM.createRoot(document.getElementById('root'));
        8. root.render(
        9.     
        10.         
        11.     
        12. );

        项目结构：

        运行结果：

        13. 向路由组件传递params参数

        1.params参数

        Header.jsx

        1. import React, {Component} from 'react';
        2.  
        3. class Header extends Component {
        4.     render() {
        5.         // console.log('Header组件收到的props是', this.props)
        6.         return (
        7.             
        8.                 
          "page-header">
          React Router Demo
        9.             
        10.         );
        11.     }
        12. }
        13.  
        14. export default Header;

        MyNavLink.jsx

        1. import React, {Component} from 'react';
        2. import {NavLink} from "react-router-dom";
        3.  
        4. class MyNavLink extends Component {
        5.     render() {
        6.         console.log(this.props)
        7.         return (
        8.             
        9.                 "atguigu" className="list-group-item" {...this.props}/>
        10.             
        11.         );
        12.     }
        13. }
        14.  
        15. export default MyNavLink;

        About.jsx

        1. import React, {Component} from 'react';
        2.  
        3. class About extends Component {
        4.     render() {
        5.         // console.log('About组件收到的props是', this.props)
        6.         return (
        7.             
        8.                 
          我是About的内容
        9.             
        10.         );
        11.     }
        12. }
        13.  
        14. export default About;

        Detail.jsx

        1. import React, {Component} from 'react';
        2.  
        3. const DetailData = [
        4.     {id: '01', content: '你好,中国'},
        5.     {id: '02', content: '你好,尚硅谷'},
        6.     {id: '03', content: '你好,未来的自己'},
        7. ]
        8.  
        9. class Detail extends Component {
        10.  
        11.     render() {
        12.         // console.log(this.props)
        13.         const {id, title} = this.props.match.params
        14.         const findResult = DetailData.find((detailObj) => {
        15.             return detailObj.id === id
        16.         })
        17.         return (
        18.             
          •                 
          • ID:{id}
          •                 
          • TITLE:{title}
          •                 
          • CONTENT:{findResult.content}
          •             
          •         );
          •     }
          • }
          •  
          • export default Detail;

          Message.jsx

          1. import React, {Component} from 'react';
          2. import Detail from "./Detail/Detail";
          3. import {Link, Route} from "react-router-dom";
          4.  
          5. class Message extends Component {
          6.     state = {
          7.         messageArr: [
          8.             {id: '01', title: '消息1'},
          9.             {id: '02', title: '消息2'},
          10.             {id: '03', title: '消息3'},
          11.         ]
          12.     }
          13.  
          14.     render() {
          15.         const {messageArr} = this.state
          16.         return (
          17.             
          18.                 
            •                     {
            •                         messageArr.map((msgObj) => {
            •                             return (
            •                                 
            •                                     ${msgObj.id}/${msgObj.title}`}>{msgObj.title}
            •                                 
            •                             )
            •                         })
            •                     }
            •                 
            •  
            •                 
            •                 
            •             
            •         );
            •     }
            • }
            •  
            • export default Message;

            News.jsx

            1. import React, {Component} from 'react';
            2.  
            3. class News extends Component {
            4.     render() {
            5.         return (
            6.             
            7.                 
              •                     
              • news001
              •                     
              • news002
              •                     
              • news003
              •                 
              •             
              •         );
              •     }
              • }
              •  
              • export default News;

              Home.jsx 

              1. import React, {Component} from 'react';
              2. import MyNavLink from "../../components/MyNavLink/MyNavLink";
              3. import {Redirect, Route, Switch} from "react-router-dom";
              4. import News from "./News/News";
              5. import Message from "./Message/Message";
              6.  
              7. class Home extends Component {
              8.     render() {
              9.         return (
              10.             
              11.                 
                Home组件内容
              12.                 
              13.                     
                  "nav nav-tabs">
              14.                         
              16.                             "/home/news">News
              17.                         
              18.                         
              20.                             "/home/message">Message
              21.                         
              22.                     
              23.                     
              24.                         "/home/news" component={News}>
              25.                         "/home/message" component={Message}>
              26.                         "/home/news">
              27.                     
              28.                 
              29.             
              30.         );
              31.     }
              32. }
              33.  
              34. export default Home;

              App.js

              1. import React, {Component} from 'react';
              2. import {Redirect, Route, Switch} from "react-router-dom";
              3. import About from "./pages/About/About";
              4. import Home from "./pages/Home/Home";
              5. import Header from "./components/Header/Header";
              6. import MyNavLink from "./components/MyNavLink/MyNavLink";
              7.  
              8. class App extends Component {
              9.     render() {
              10.         return (
              11.             
              12.                 
                "row">
              13.                     
                "col-xs-offset-2 col-xs-8">
              14.                         
              15.                     
              16.                 
              17.                 
                "row">
              18.                     
                "col-xs-2 col-xs-offset-2">
              19.                         
                "list-group">
              20.                             "/about">About
              21.                             "/home">Home
              22.                         
              23.                     
              24.                     
                "col-xs-6">
              25.                         
                "panel">
              26.                             
                "panel-body">
              27.                                 
              28.                                     "/about" component={About}>
              29.                                     "/home" component={Home}>
              30.                                     "/about">
              31.                                 
              32.                             
              33.                         
              34.                     
              35.                 
              36.             
              37.         );
              38.     }
              39. }
              40.  
              41. export default App;

              index.js

              1. import React from 'react';
              2. import ReactDOM from 'react-dom/client';
              3. import App from './App';
              4. import {BrowserRouter, HashRouter} from "react-router-dom";
              5.  
              6.  
              7. const root = ReactDOM.createRoot(document.getElementById('root'));
              8. root.render(
              9.     
              10.         
              11.     
              12. );

              运行结果：

              项目结构：

               

              14.向路由组件传递search参数

              2.search参数

              Message.jsx

              1. import React, {Component} from 'react';
              2. import Detail from "./Detail/Detail";
              3. import {Link, Route} from "react-router-dom";
              4.  
              5. class Message extends Component {
              6.     state = {
              7.         messageArr: [
              8.             {id: '01', title: '消息1'},
              9.             {id: '02', title: '消息2'},
              10.             {id: '03', title: '消息3'},
              11.         ]
              12.     }
              13.  
              14.     render() {
              15.         const {messageArr} = this.state
              16.         return (
              17.             
              18.                 
                •                     {
                •                         messageArr.map((msgObj) => {
                •                             return (
                •                                 
                •                                     {/*${msgObj.id}/${msgObj.title}`}>{msgObj.title}*/}
                •                                     ${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}
                •                                 
                •                             )
                •                         })
                •                     }
                •                 
                •  
                •                 
                •                 {/**/}
                •                 
                •             
                •         );
                •     }
                • }
                •  
                • export default Message;

                Detail.jsx

                1. import React, {Component} from 'react';
                2. import qs from "qs"
                3.  
                4. const DetailData = [
                5.     {id: '01', content: '你好,中国'},
                6.     {id: '02', content: '你好,尚硅谷'},
                7.     {id: '03', content: '你好,未来的自己'},
                8. ]
                9.  
                10. class Detail extends Component {
                11.  
                12.     render() {
                13.         console.log(this.props)
                14.         // const {id, title} = this.props.match.params
                15.  
                16.         const {search} = this.props.location
                17.         const {id, title} = qs.parse(search.slice(1))
                18.         const findResult = DetailData.find((detailObj) => {
                19.             return detailObj.id === id
                20.         })
                21.         return (
                22.             
                  •                 
                  • ID:{id}
                  •                 
                  • TITLE:{title}
                  •                 
                  • CONTENT:{findResult.content}
                  •             
                  •         );
                  •     }
                  • }
                  •  
                  • export default Detail;

                  运行结果：

                  项目结构：

                  15.向路由组件传递state参数

                  state参数：

                   Message.jsx

                  1. import React, {Component} from 'react';
                  2. import Detail from "./Detail/Detail";
                  3. import {Link, Route} from "react-router-dom";
                  4.  
                  5. class Message extends Component {
                  6.     state = {
                  7.         messageArr: [
                  8.             {id: '01', title: '消息1'},
                  9.             {id: '02', title: '消息2'},
                  10.             {id: '03', title: '消息3'},
                  11.         ]
                  12.     }
                  13.  
                  14.     render() {
                  15.         const {messageArr} = this.state
                  16.         return (
                  17.             
                  18.                 
                    •                     {
                    •                         messageArr.map((msgObj) => {
                    •                             return (
                    •                                 
                    •                                     {/*${msgObj.id}/${msgObj.title}`}>{msgObj.title}*/}
                    •                                     {/*${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}*/}
                    •                                     
                    •                                         pathname: '/home/message/detail',
                    •                                         state: {id: msgObj.id, title: msgObj.title}
                    •                                     }}>{msgObj.title}
                    •                                 
                    •                             )
                    •                         })
                    •                     }
                    •                 
                    •  
                    •                 
                    •                 {/**/}
                    •                 {/**/}
                    •                 
                    •             
                    •         );
                    •     }
                    • }
                    •  
                    • export default Message;

                    Detail.jsx

                    1. import React, {Component} from 'react';
                    2. import qs from "qs"
                    3.  
                    4. const DetailData = [
                    5.     {id: '01', content: '你好,中国'},
                    6.     {id: '02', content: '你好,尚硅谷'},
                    7.     {id: '03', content: '你好,未来的自己'},
                    8. ]
                    9.  
                    10. class Detail extends Component {
                    11.  
                    12.     render() {
                    13.         console.log(this.props)
                    14.         // const {id, title} = this.props.match.params
                    15.  
                    16.         // const {search} = this.props.location
                    17.         // const {id, title} = qs.parse(search.slice(1))
                    18.  
                    19.  
                    20.         const {id, title} = this.props.location.state || {}
                    21.  
                    22.         const findResult = DetailData.find((detailObj) => {
                    23.             return detailObj.id === id
                    24.         }) || {}
                    25.         return (
                    26.             
                      •                 
                      • ID:{id}
                      •                 
                      • TITLE:{title}
                      •                 
                      • CONTENT:{findResult.content}
                      •             
                      •         );
                      •     }
                      • }
                      •  
                      • export default Detail;

                      运行结果：

                      16.总结路由参数

                      17.push与repalce 

                      Message.jsx

                      1. import React, {Component} from 'react';
                      2. import Detail from "./Detail/Detail";
                      3. import {Link, Route} from "react-router-dom";
                      4.  
                      5. class Message extends Component {
                      6.     state = {
                      7.         messageArr: [
                      8.             {id: '01', title: '消息1'},
                      9.             {id: '02', title: '消息2'},
                      10.             {id: '03', title: '消息3'},
                      11.         ]
                      12.     }
                      13.  
                      14.     render() {
                      15.         const {messageArr} = this.state
                      16.         return (
                      17.             
                      18.                 
                        •                     {
                        •                         messageArr.map((msgObj) => {
                        •                             return (
                        •                                 
                        •                                     {/*${msgObj.id}/${msgObj.title}`}>{msgObj.title}*/}
                        •                                     {/*${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}*/}
                        •                                     
                        •                                         pathname: '/home/message/detail',
                        •                                         state: {id: msgObj.id, title: msgObj.title}
                        •                                     }}>{msgObj.title}
                        •                                 
                        •                             )
                        •                         })
                        •                     }
                        •                 
                        •  
                        •                 
                        •                 {/**/}
                        •                 {/**/}
                        •                 
                        •             
                        •         );
                        •     }
                        • }
                        •  
                        • export default Message;

                        18.编程式路由导航 

                        Message.jsx

                        1. import React, {Component} from 'react';
                        2. import Detail from "./Detail/Detail";
                        3. import {Link, Route} from "react-router-dom";
                        4.  
                        5. class Message extends Component {
                        6.     state = {
                        7.         messageArr: [
                        8.             {id: '01', title: '消息1'},
                        9.             {id: '02', title: '消息2'},
                        10.             {id: '03', title: '消息3'},
                        11.         ]
                        12.     }
                        13.  
                        14.     render() {
                        15.         const {messageArr} = this.state
                        16.         return (
                        17.             
                        18.                 
                          •                     {
                          •                         messageArr.map((msgObj) => {
                          •                             return (
                          •                                 
                          •                                     {/*${msgObj.id}/${msgObj.title}`}>{msgObj.title}*/}
                          •                                     {/*${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}*/}
                          •                                     
                          •                                         pathname: '/home/message/detail',
                          •                                         state: {id: msgObj.id, title: msgObj.title}
                          •                                     }}>{msgObj.title}
                          •                                 
                          •                             )
                          •                         })
                          •                     }
                          •                 
                          •  
                          •                 
                          •                 {/**/}
                          •                 {/**/}
                          •                 
                          •             
                          •         );
                          •     }
                          • }
                          •  
                          • export default Message;

                           Detail.jsx

                          1. import React, {Component} from 'react';
                          2. import qs from "qs"
                          3.  
                          4. const DetailData = [
                          5.     {id: '01', content: '你好,中国'},
                          6.     {id: '02', content: '你好,尚硅谷'},
                          7.     {id: '03', content: '你好,未来的自己'},
                          8. ]
                          9.  
                          10. class Detail extends Component {
                          11.  
                          12.     render() {
                          13.         console.log(this.props)
                          14.         // const {id, title} = this.props.match.params
                          15.  
                          16.         // const {search} = this.props.location
                          17.         // const {id, title} = qs.parse(search.slice(1))
                          18.  
                          19.  
                          20.         const {id, title} = this.props.location.state || {}
                          21.  
                          22.         const findResult = DetailData.find((detailObj) => {
                          23.             return detailObj.id === id
                          24.         }) || {}
                          25.         return (
                          26.             
                            •                 
                            • ID:{id}
                            •                 
                            • TITLE:{title}
                            •                 
                            • CONTENT:{findResult.content}
                            •             
                            •         );
                            •     }
                            • }
                            •  
                            • export default Detail;

                             19.withRouter的作用

                            News.jsx

                            1. import React, {Component} from 'react';
                            2.  
                            3. class News extends Component {
                            4.     componentDidMount() {
                            5.         setTimeout(() => {
                            6.             this.props.history.push('/home/message')
                            7.         }, 2000)
                            8.     }
                            9.  
                            10.     render() {
                            11.         return (
                            12.             
                            13.                 
                              •                     
                              • news001
                              •                     
                              • news002
                              •                     
                              • news003
                              •                 
                              •             
                              •         );
                              •     }
                              • }
                              •  
                              • export default News;

                               

                              1. withRouter可以加工一般组件，让一般组件具备路由组件所特有的API
                              2. withRouter的返回值是一个新组件 

                              Header.jsx

                              1. import React, {Component} from 'react';
                              2. import {withRouter} from "react-router-dom";
                              3.  
                              4.  
                              5. class Header extends Component {
                              6.     back = () => {
                              7.         this.props.history.goBack()
                              8.     }
                              9.     forward = () => {
                              10.         this.props.history.goForward()
                              11.     }
                              12.     go = () => {
                              13.         this.props.history.go(2)
                              14.     }
                              15.  
                              16.     render() {
                              17.         // console.log('Header组件收到的props是', this.props)
                              18.         return (
                              19.             
                              20.                 
                                "page-header">
                              21.                     
                                React Router Demo
                              22.                     
                              23.                     
                              24.                     
                              25.                 
                              26.             
                              27.         );
                              28.     }
                              29. }
                              30.  
                              31. export default withRouter(Header);

                              20.BrowserRouter与HashRouter

                            14. 相关阅读:
                              07-服务管理-03-自建yum仓库（手把手教你搭建内网yum源）
                              27、git的安装和配置（自用简易版）
                              第142篇:原生js实现响应式原理
                              SpringBoot项目基础设施搭建
                              华为OD机试真题- 非严格递增连续数字序列-2023年OD统一考试（B卷）
                              jjwt使用说明-笔记
                              Maven无法拉取SNAPSHOT依赖的解决办法
                              【开源】JAVA+Vue.js实现创意工坊双创管理系统
                              RK平台使用MP4视频做开机动画以及卡顿问题
                              Android面试指南
                            15. 原文地址：https://blog.csdn.net/qq_56444564/article/details/133899357