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">&nbsp;&nbsp;新闻</Link>
            <div>&nbsp;&nbsp;国际</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 也会输出对应模块的信息。
react基础05--react-router 路由_第1张图片

路由传参

实际项目中,我们很多时候需要通过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">  &nbsp;新闻</Link>
            <div>&nbsp;国际 &nbsp;</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 的页面上。
react基础05--react-router 路由_第2张图片

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> &nbsp;
            <Link to="/news">新闻</Link> &nbsp;
            <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>&nbsp;
                <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 注意事项

  1. 最新版本react-router-doc 有elament属性,但是没有component 属性; 使用的时候需要将Route 放在 Routes 中。其props 也有很大的差异,因此可以通过 npm install react-router-dom@5.2.0 来指定版本。

  2. 如果需要用老版本的 react, 那么可以通过 npm install -g create-react-app@^3.4.1 来安装

  3. 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>
         )
     }
    

    react基础05--react-router 路由_第3张图片
    更改后

     render(){
         return (
             <BrowserRouter>
                 <Switch>
                     <Route path="/list/:id" component={GoodsList} />
                     <Route exact path="/" component={Nav01} />
                 </Switch>
             </BrowserRouter>
         )
     }
    

    react基础05--react-router 路由_第4张图片

  4. 如果使用 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’

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号