react基础05--react-router 路由
发布时间：2023-03-14 12:00
react基础05--react-router 路由
- 1 介绍
- 2 方法&案例
-
- react-router 路由的基本使用
- 路由传参
- Switch 路由匹配
- 嵌套路由
- 3 注意事项
- 4 说明
1 介绍
react基础04–redux 管理数据 中介绍了redux 管理数据的方法，并配以实际案例。本节继上文继续介绍 react-router，实现单页面内部跳转功能。
2 方法&案例
安装路由
npm i react-router-dom --save
react-router 路由的基本使用
通过对router的基本使用，可以实现单击或者在url输入模块名称就返回对应模块的信息。
vim index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>React App 3-1title>
head>
<body>
<div id="root">div>
body>
html>
vim index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />
,document.getElementById('root')
);
vim App.js
import React, { Component } from 'react'
import Header from './Header'
import {BrowserRouter, Route} from 'react-router-dom'
import Home from './Home'
import News from './News'
import Guoji from './Guoji'
export class App extends Component {
constructor(){
super()
}
render(){
return (
<BrowserRouter>
<Header></Header>
<hr/>
<Route path="/home" component={<Home />} />
<Route path="/news" component={<News />} />
<Route path="/guoji" component={<Guoji />} />
</BrowserRouter>
)
}
}
export default App
vim Header.js
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
export class Header extends Component {
render(){
return (
<div style={{display: 'flex', flexDirection: 'row'}}>
<Link to="/home">首页</Link>
<Link to="/news"> 新闻</Link>
<div> 国际</div>
</div>
)
}
}
export default Header
vim Home.js
import React, { Component } from 'react'
export class Home extends Component {
render() {
return (
<div>
这是首页
</div>
)
}
}
export default Home
vim News.js
import React, { Component } from 'react'
export class News extends Component {
render() {
return (
<div>
这是新闻页
</div>
)
}
}
export default News
vim Guoji.js
import React, { Component } from 'react'
export class Guoji extends Component {
render() {
return (
<div>
这是国际页
</div>
)
}
}
export default Guoji
结果：
点击首页|新闻，就会输出首页或者新闻模块的信息，在url 输入home|news|guoji 也会输出对应模块的信息。
路由传参
实际项目中，我们很多时候需要通过url 的参数来显示不同的页面，因此我们需要在 route 中可以接收参数，而且需要通过具体组件的 props 来获取参数的值。
vim app.js
import React, { Component } from 'react'
import Header from './Header'
import {BrowserRouter, Route, Routes} from 'react-router-dom'
import Home from './Home'
import News from './News'
import Guoji from "./Guoji";
export class App extends Component {
render(){
return (
<BrowserRouter>
<Header></Header>
<hr/>
<Route path="/home" component={Home} />
<Route path="/news/:id/:title" component={News} />
<Route path="/guoji" component={Guoji} />
<Route exact path="/" component={Home} />
</BrowserRouter>
)
}
}
export default App
path="/news/:id/:title" 是其可以接收 id 和 tittle 参数
vim Header.js
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
export class Header extends Component {
render(){
return (
<div style={{display: 'flex', flexDirection: 'row'}}>
<Link to="/home">首页</Link>
<Link to="/news/1/news1"> 新闻</Link>
<div> 国际 </div>
</div>
)
}
}
export default Header
to="/news/1/news1"> ，直接给其内置1/news 参数
vim News.js
import React, { Component } from 'react'
export class News extends Component {
render() {
console.log(this.props)
const {id, title} = this.props.match.params
return (
<div>
这是新闻页 -- {id},{title}
</div>
)
}
}
export default News
通过 this.props.match.params 获取参数，并将其显示在主页上
结果：
点击 新闻， 其 url 为 http://localhost:3000/news/1/news1，且成功地将该参数显示在组件News 的页面上。
Switch 路由匹配
默认情况下，如果我们使用多个Route，且最后一个path="/", 从上到下匹配路由，如果匹配到News后，也会匹配到 Home，导致显示的内容过多。
此时我们可以通过 Switch 来解决，当匹配到一个后及停止匹配。
vim App.js
import React, { Component } from 'react'
import Header from './Header'
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import Home from './Home'
import News from './News'
import Guoji from "./Guoji";
export class App extends Component {
render(){
return (
<BrowserRouter>
<Header></Header>
<hr/>
<Switch>
<Route path="/news/:id/:title" component={News} />
<Route path="/guoji" component={Guoji} />
<Route path="/" component={Home} />
</Switch>
</BrowserRouter>
)
}
}
export default App
结果:
使用Switch 后，当url不输入任何参数的时候，其默认会匹配到 “/”
嵌套路由
实际应用中我们很多时候需要多曾菜单，即需要多层路由，此时我们就需要在子组件中再通过Switch 新增一层路由。
vim App.js
import React, { Component } from 'react'
import Header from './Header'
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import Home from './Home'
import News from './News'
import Guoji from "./Guoji";
export class App extends Component {
render(){
return (
<BrowserRouter>
<Header></Header>
<hr/>
<Switch>
<Route path="/news" component={News} />
<Route path="/guoji" component={Guoji} />
<Route path="/" component={Home} />
</Switch>
</BrowserRouter>
)
}
}
export default App
vim Header.js
import React, { Component } from 'react'
import { Link } from 'react-router-dom'
export class Header extends Component {
render(){
return (
<div style={{display: 'flex', flexDirection: 'row'}}>
<Link to="/home">首页</Link>
<Link to="/news">新闻</Link>
<Link to="/guoji">国际</Link>
</div>
)
}
}
export default Header
vim News.js
import React, { Component } from 'react'
import {Link, Route, Switch} from "react-router-dom";
import Sport from "./Sport";
import Shehui from "./Shehui";
export class News extends Component {
render() {
return (
<div>
<Link to="/news/sport">体育</Link>
<Link to="/news/shehui">社会</Link>
{/*二级路由|嵌套路由*/}
<Switch>
<Route path="/news/sport" component={Sport} />
<Route path="/news/shehui" component={Shehui} />
</Switch>
</div>
)
}
}
export default News
vim Sport.js
import React, { Component } from 'react'
export class Sport extends Component {
render() {
return (
<div>
这是体育页
</div>
)
}
}
export default Sport
同理社会页
结果:
点击新闻后，再点击子栏目，可以对应显示体育、社会等内容。
3 注意事项
-
最新版本react-router-doc 有elament属性，但是没有component 属性; 使用的时候需要将Route 放在 Routes 中。其props 也有很大的差异，因此可以通过 npm install react-router-dom@5.2.0 来指定版本。
-
如果需要用老版本的 react， 那么可以通过 npm install -g create-react-app@^3.4.1 来安装
-
react route 需要注意格式
tiny-warning.esm.js:11 Warning: You should not use <Route component> and <Route children> in the same route; <Route component> will be ignored render(){ return ( <BrowserRouter> <Switch> <Route path="/list/:id" component={GoodsList} > </Route> <Route exact path="/" component={Nav01} /> </Switch> </BrowserRouter> ) }
更改后render(){ return ( <BrowserRouter> <Switch> <Route path="/list/:id" component={GoodsList} /> <Route exact path="/" component={Nav01} /> </Switch> </BrowserRouter> ) }
-
如果使用 UNSAFE_componentWillMount() 的话, 那么需要在 index.js 中去掉, 否则会warning.
4 说明
软件版本:
node 16.13.1
create-react-app 5.0.0
react-router-dom@5.2.0
参考文档：
React基础入门+综合案例
react 官网
React基础入门教程
withRouter’ is not exported from ‘react-router-dom’