二、【React-Router5】路由的基本使用

1、写在前面的总结

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

2、效果图

3、项目结构

4、CODE

样式文件扔public/css下，在index.html里引入即可 ，点击访问 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>
);
1
2
3
4
5
6
7
8
9
10
11
12
13

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中靠跳转不同页面`}</h3>
              {`About\nHome`}
              <hr />
              <h3>在React中靠路由链接实现切换不同组件</h3>
              {`\n\tAbout\n\tHome\n`}
              <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>
                {`\n`}
                <br />
                <Route path='/about' component={About} />
                <Route path='/home' component={Home} />
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

4.3、About.jsx

import React, { Component } from 'react'

export default class About extends Component {
    render() {
        return (
            <h3>我是About的内容</h3>
        )
    }
}
1
2
3
4
5
6
7
8
9

4.4、Home.jsx

import React, { Component } from 'react'

export default class Home extends Component {
    render() {
        return (
            <h3>我是Home的内容</h3>
        )
    }
}
1
2
3
4
5
6
7
8
9

5、Result

6、路由组件与一般组件

1. 写法不同
   1. 一般组件：
   2. 路由组件：
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 带有一个 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>
1
2
3
4

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 属性上
            // {this.props.children}

            // 很明显，既然 children 是 props 默认可接收的属性，那如下那般写法岂不是更简洁了~
            <NavLink className="list-group-item" {...this.props} />
        )
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

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>
1
2
3
4
5

---

---

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