文章目录

• 1、写在前面的总结
• 2、效果图
• 3、项目结构
• 4、CODE
• • 4.1、index.js
  • 4.2、App.js
  • 4.3、About.jsx
  • 4.4、Home.jsx
• 5、Result
• 6、路由组件与一般组件
• 7、Link 升级 NavLink
• 8、封装NavLink
• • 8.1、MyNavLink.jsx
  • 8.2、修改上面4.2部分代码

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(
);

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 (
React Router Demo
{ whiteSpace: 'pre-wrap' }}>
{`原生html中靠跳转不同页面`}
{`About\nHome`}
在React中靠路由链接实现切换不同组件
{`\n\tAbout\n\tHome\n`}
AboutHome
{ whiteSpace: 'pre-wrap' }}>{/* Route 注册路由 */}
Route 注册路由
{`\n`}
About} />Home} />
);}
}

4.3、About.jsx

import React, { Component } from 'react'export default class About extends Component {render() {return (
我是About的内容
)}
}

4.4、Home.jsx

import React, { Component } from 'react'export default class Home extends Component {render() {return (
我是Home的内容
)}
}

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'About
Home

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 默认可接收的属性，那如下那般写法岂不是更简洁了~...this.props} />)}
}

8.2、修改上面4.2部分代码

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

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