1. React路由分类
React有三种路由
- react-router-dom :用于浏览器的路由
BrowerRouter 基于浏览器的history
HashRouter 基于地址部分的hash值(路由带“#”) - react-router-native:用于原生app的路由
- react-router:原生与浏览器通用部分
2. 路由安装
在项目终端里输入npm install react-router-dom
可以在package.json文件夹中检查是否安装成功
3. 渲染路由组件
创建两个路由组件
// About组件
import React, { Component } from 'react'
export default class About extends Component {
render() {
return (
<div>
<h1>我是About组件</h1>
</div>
)
}
}
// Hello组件
import React, { Component } from 'react'
export default class Hello extends Component {
render() {
return (
<div>
<h1>我是Hello组件</h1>
</div>
)
}
}
在App.js文件中引入路由和组件
import { BrowserRouter,Link,Route,Routes} from "react-router-dom" // 引入路由
import Hello from "./Hello" // 引入组件
import About from './About'
import React, { Component } from 'react'
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<h1>我是App组件</h1>
<Link to="/hello">hello</Link><br/>
<Link to="/about">about</Link>
<Routes>
<Route path="/hello" element={<Hello/>}></Route>
<Route path="/about" element={<About/>}></Route>
</Routes>
</div>
</BrowserRouter>
)
}
}
export default App;
效果
点击hello渲染Hello组件;点击about渲染About组件
4. 嵌套路由
在v6版本的路由中,使用Routes标签代替v5版本中的Switch标签,且必须加。
效果