个人笔记

或许为了自身写，或许为了知己写！

ReactRouter 笔记

发表于 | 更新于 |
字数统计 1.6k 字

ReactRouter 配置

首先安装 react 和 react-router-dom。

  • 路由配置
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
//AppRouter

import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

function Index() {
    return (
        <h2>首页</h2>
    )
}

function List() {
    return (
        <h2>列表页</h2>
    )
}

function AppRouter() {
    return (
        <Router>
            <ul>
                <li>
                    <Link to="/">首页</Link>
                </li>
                <li>
                    <Link to='/list/'>列表</Link>
                </li>
            </ul>
            <Route path="/" exact component={Index} />
            <Route path="/list/" component={List} />
        </Router>
    )
}

export default AppRouter;

exact：表示精确匹配。

ReactRouter 拆分

模拟真实项目，每个菜单是一个单独的路由文件。

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
//AppRouter
import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

import Index from './pages/index'
import List from './pages/list'

function AppRouter() {
    return (
        <Router>
            <ul>
                <li>
                    <Link to="/">首页</Link>
                </li>
                <li>
                    <Link to='/list/'>列表</Link>
                </li>
            </ul>
            <Route path="/" exact component={Index} />
            <Route path="/list/" component={List} />
        </Router>
    )
}

export default AppRouter

ReactRouter 接收路由参数

设置路由动态传值规则：

  • 第一步：传递值

  • 第二步：接收值

  • 第三步：显示内容

在 list 路由配置路由参数：

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

import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

import Index from './pages/index'
import List from './list/index'

function AppRouter() {
    return (
        <Router>
            <ul>
                <li>
                    <Link to="/">首页</Link>
                </li>
                <li>
                    <Link to='/list/'>列表</Link>
                </li>
            </ul>
            <Route path="/" exact component={Index} />
            {/* 设置路由参数 */}
            <Route path="/list/:id" component={List} />
        </Router>
    )
}

export default AppRouter

子组件 List 接收路由参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import React, {Component} from 'react';
import {Link} from 'react-router-dom'


class List extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() { 
        return ( 
            <h2>页面分离-列表页 ---url传递的值是： {this.state.id}</h2>
         );
    }
    componentDidMount() {
        console.log(this.props)
        let id = this.props.match.params.id
        this.setState({id: id})
    }
}

export default List;

ReactRouter 动态传值和重定向

在 react 中路由重定向有两种方式，一种是标签式，一种是编程式。

配置列表详情界面组件，并将该组件添加到 AppRouter.js 文件中。 

1
2
3
4
5
6
7
8
9
import React from 'react'

function ListDetail() {
 return {
     <h2>详情页</h2>
 }
}

export default ListDetail;
  • 设置路由动态传值
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

import React, {Component} from 'react';
import {Link} from 'react-router-dom'

class List Component{
    constructor(props) {
        super(props)
        this.state = {
            list: [
                {cid: 126, title: '个人博客1'},
                {cid: 666, title: '个人博客2'}
            ]
        }
    }
    render() { 
        return ( 
            <>
                <h2>页面分离-列表页</h2>
                <ul>
                    <li>url动态传值</li>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <li key={index}>
                                    <Link to={'/Listdetail/'+item.cid}>{item.title}</Link> 
                                </li>
                            )
                        })
                    }
                </ul>
            </>
         );
    }
}

export default List

配置重定向界面 home.js 文件，并将该组件添加到 AppRouter.js 文件中。

1
2
3
4
5
6
7
8
9
10

import React from 'react'

function Home() {
    return (
        <h2>重定向界面</h2>
    )
}

export default Home;
  • 标签式设置重定向
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

import React, {Component} from 'react';
import {Link, Redirect} from 'react-router-dom'

class List Component{
    constructor(props) {
        super(props)
        this.state = {
            list: [
                {cid: 126, title: '个人博客1'},
                {cid: 666, title: '个人博客2'}
            ]
        }
    }
    render() { 
        return ( 
            <>
                {/* 标签式 Redirect 重定向路径  */}
                <Redirect to="/home/" />

                <h2>页面分离-列表页</h2>
                <ul>
                    <li>url动态传值</li>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <li key={index}>
                                    <Link to={'/Listdetail/'+item.cid}>{item.title}</Link> 
                                </li>
                            )
                        })
                    }
                </ul>
            </>
         );
    }
}

export default List
  • 编程式设置重定向
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

import React, {Component} from 'react';
import {Link, Redirect} from 'react-router-dom'

class List Component{
    constructor(props) {
        super(props)
        this.state = {
            list: [
                {cid: 126, title: '个人博客1'},
                {cid: 666, title: '个人博客2'}
            ]
        }

        //编程式重定向
        this.props.history.push('/home/')
    }
    render() { 
        return ( 
            <>
                <h2>页面分离-列表页</h2>
                <ul>
                    <li>url动态传值</li>
                    {
                        this.state.list.map((item, index) => {
                            return (
                                <li key={index}>
                                    <Link to={'/Listdetail/'+item.cid}>{item.title}</Link> 
                                </li>
                            )
                        })
                    }
                </ul>
            </>
         );
    }
}

export default List

ReactRouter 路由嵌套

模拟真实项目选择左侧列表内容，呈现出该列表相关内容信息。

配置 AppRouter.js 路由文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import List from './pages/list'

function AppRouter() {
    return (
        <Router>
            <ul>
                <li>
                    <Link to="/">首页</Link>
                </li>
                <li>
                    <Link to="/list">列表</Link>
                </li>
            </ul>
            <Route path="/" exact />
            <Route path="/list" component={List} />
        </Router>
    )
}

export default AppRouter

配置 List 组件并布局样式

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

    import React, { Component } from 'react'
    import './index.css'

    class List Component {
        constructor(props) {
            super(props)
            this.state ={
                routerConfig: [
                    {id: 1, title: '视频页面', path: '/video/', exact: false, component: Video}
                ]
            }
        }
        return (
            <>
                <h2>列表页</h2>
                <div className="box">
                    <div className="left">
                        <ul>
                            {
                                this.state.routerConfig.map((item, index) => {
                                    return(
                                        <li key={item.id}>
                                            <Link to={item.path}>{item.title}</Link>
                                        </li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                    <div className="right">
                        点击右侧列表呈现相关内容
                        {
                            this.state.routerConfig.map((item, index) => {
                                return(<Route path={item.path} component={item.component} />)
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }

export default List

布局样式

1
2
3
4
5
...

.box{ display: flex }
.left{ width:120px;}
.right{ flex:1 }

配置 Video 组件内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import React from 'react';
import { Route, Link} from 'react-router-dom'
import Vue from './vue'

function Video() {
    return ( 
        <>
            <h2>
                video页面
            </h2>
            <ul>
                <li>
                    <Link to="/video/Vue/">Vue教程</Link>
                </li>
            </ul>
            <div>
                <Route path="/video/vue" component={Vue} />
            </div>
        </>
    );
}

export default Video;

配置 Vue 组件内容

1
2
3
4
5
6
7
8
9
10

import React from 'react'

function Vue() {
    return (
        <h2>Vue教程开始啦~</h2>
    )
}

export default Vue;
———— / END / ————
0%