1、写在前面的总结

1. 明确好界面中的导航区、展示区
2. 导航区的a标签改为Link标签
   1. <Link to="/xxxxx">Demo</Link>
3. 展示区写Route标签进行路径的匹配
   1. <Route path='/xxxx' component={Demo}/>
4. <App> 的最外侧包裹了一个<BrowserRouter> 或 <HashRouter>

2、效果图

3、项目结构

4、CODE

样式文件扔public/css下，在index.html里引入即可 <link rel="stylesheet" href="/css/bootstrap.css">，点击访问 bootstrap.css 样式文件

4.1、index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

4.2、App.js

import React, { Component } from 'react'
import { Link, Route } from 'react-router-dom'
import About from './components/About'
import Home from './components/Home'

export default class App extends Component {


  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <div className="page-header"><h1>React Router Demo</h1></div>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            <div className="list-group" style={{ whiteSpace: 'pre-wrap' }}>
              <h3>{`原生html中靠<a>跳转不同页面`}</h3>
              {`<a className="list-group-item active" href="./about.html">About</a>\n<a className="list-group-item" href="./home.html">Home</a>`}
              <hr />
              <h3>在React中靠路由链接实现切换不同组件</h3>
              {`<BrowserRouter>\n\t<Link className="list-group-item" to="/about">About</Link>\n\t<Link className="list-group-item" to="/home">Home</Link>\n</BrowserRouter>`}
              <br />

              <Link className="list-group-item" to="/about">About</Link>
              <Link className="list-group-item" to="/home">Home</Link>
            </div>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body" style={{ whiteSpace: 'pre-wrap' }}>
                {/* Route 注册路由 */}
                <h3>Route 注册路由</h3>
                {`<Route path='/about' component={About} />\n<Route path='/home' component={Home} />`}
                <br />
                <Route path='/about' component={About} />
                <Route path='/home' component={Home} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

4.3、About.jsx

import React, { Component } from 'react'

export default class About extends Component {
    render() {
        return (
            <h3>我是About的内容</h3>
        )
    }
}

4.4、Home.jsx

import React, { Component } from 'react'

export default class Home extends Component {
    render() {
        return (
            <h3>我是Home的内容</h3>
        )
    }
}

5、Result

6、路由组件与一般组件

1. 写法不同
   1. 一般组件：<Demo/>
   2. 路由组件：<Route path="/demo" component={Demo}/>
2. 存放位置不同
   1. 一般组件：components
   2. 路由组件：pages
3. 接收到的props不同
   1. 一般组件：写组件标签时传递了什么，就能收到什么
   2. 路由组件：接收到三个固定的属性（子属性只列举常用的）
      1. history
         1. go: ƒ go(n)
         2. goBack: ƒ goBack()
         3. goForward: ƒ goForward()
         4. push: ƒ push(path, state)
         5. replace: ƒ replace(path, state)
      2. location
         1. pathname: “/about”
         2. search: “”
         3. state: undefined
      3. match
         1. params: {}
         2. path: “/about”
         3. url: “/about”

7、Link 升级 NavLink

菜单栏选中添加高亮效果，使用 Link 标签的升级版 <NavLink>

NavLink 带有一个 activeClassName 属性，可为其赋值高亮时的样式类名，默认值是active，如果你的高亮样式类名正好是 active，那就可省略不写这个属性了

NavLink可以实现路由链接的高亮，通过activeClassName指定样式名，默认active

修改上面4.2部分代码如下：

import { NavLink, Route } from 'react-router-dom'

<NavLink className="list-group-item" to="/about">About</NavLink>
<NavLink className="list-group-item" to="/home">Home</NavLink>

8、封装NavLink

NavLink 身上很多属性是冗余的，如果你写了很多NavLink标签的话，此时我们可以选择防撞NavLink

这里封装成 MyNavLink 组件放到 src/components 下

8.1、MyNavLink.jsx

补充一个小知识点：标签体内容依然是特殊的标签属性，自动收集到 props.children 属性上

import React, { Component } from 'react'
import { NavLink } from 'react-router-dom'

export default class MyNavLink extends Component {
    render() {
        return (
            // 标签体内容依然是特殊的标签属性，自动收集到 props.children 属性上
            // <NavLink className="list-group-item" {...this.props}>{this.props.children}</NavLink>

            // 很明显，既然 children 是 props 默认可接收的属性，那如下那般写法岂不是更简洁了~
            <NavLink className="list-group-item" {...this.props} />
        )
    }
}

8.2、修改上面4.2部分代码

import { Route } from 'react-router-dom'
import { MyNavLink } from './cmponents/MyNavLink'

<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>

---

---

推荐学习参考视频：尚硅谷React教程-P77-路由的基本使用