Carloin

# 一.基础

# 1.初始化项目

npm install -g create-react-app

# 2.安装react router

npm install --save react-router-dom

# 3.例子

Index.js:编写Index组件

import React, { Component } from 'react';
class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>JSPang.com</h2> );
    }
}

export default Index;

1
2
3
4
5
6
7
8
9
10
11
12

List.js:编写List组件

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>List Page</h2> );
    }
}

export default List;

1
2
3
4
5
6
7
8
9
10
11
12
13

AppRouter.js

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>
        {/*exact，精准匹配，如果把Index的精准匹配去掉，会发现，无论地址栏输入什么都可以匹配到Index组件*/}
        <Route path="/" exact component={Index} />
        <Route path="/list/" component={List} />
    </Router>
  );
}

export default AppRouter;

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

# 二.ReactRouter动态传值

# 1.例子

AppRouter.js

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/123">列表</Link> </li>
        </ul>
        <Route path="/" exact component={Index} />
        <Route path="/list/:id" component={List} />{/*在path上加:id,这样就设置了允许传值的规则*/}
    </Router>
  );
}

export default AppRouter;

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

List.js:在List组件上接收并显示传递值

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
           return (  <h2>List Page->{this.state.id}</h2> );
    }
    //-关键代码---------start
    componentDidMount(){
        console.log(this.props.match)//输出：{path: '/list/:id', url: '/list/123', isExact: true,params: {id: '123'}}
        let tempId=this.props.match.params.id
        this.setState({id:tempId })
    }
    //-关键艾玛---------end
}

export default List;

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

解析： patch:自己定义的路由规则，可以清楚的看到是可以产地id参数的。 url: 真实的访问路径，这上面可以清楚的看到传递过来的参数是什么。 params：传递过来的参数，key和value值。

Index.js

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

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[
                {uid:123,title:'技术胖的个人博客-1'},
                {uid:456,title:'技术胖的个人博客-2'},
                {uid:789,title:'技术胖的个人博客-3'},
            ]
         }
    }
    render() { 
        return ( 
            <ul>
                {
                    this.state.list.map((item,index)=>{
                        return (
                            <li key={index}>
                               <Link to={'/list/'+item.uid}> {item.title}</Link> 
                            </li>
                        )
                    })
                }
            </ul>
        )
    }
}

export default Index;

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

# 三.React Router重定向Redirect使用

# 1.标签式重定向

利用<Redirect>标签来进行重定向，业务逻辑不复杂时建议使用这种。

# 例子

Home.js

import React, { Component } from 'react';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>我是 Home 页面</h2> );
    }
}

export default Home;

1
2
3
4
5
6
7
8
9
10
11
12
13

AppRouter.js

import Home from './Pages/Home'
<Route path="/home/" component={Home} />

1
2

Index.js

import { Link , Redirect } from "react-router-dom";
class Index extends Component {
    render() { 
        return ( 
        <Redirect to="/home/" />
        )
    }
}

export default Index;

1
2
3
4
5
6
7
8
9
10
11

# 2.编程式重定向

利用编程的方式，一般用于业务逻辑当中，比如登录成功挑战到会员中心页面。

# 例子：

直接在构造函数constructor中加入下面的重定向代码

this.props.history.push("/home/");

# 四.ReactRouter嵌套路由实例

# 1.安装

npm install --save react-router-dom

# 2.例子1

# 目录

- src
|--Pages
   |--video
        |--Video.js
        |--ReactPage.js
        |--Flutter.js
        |--Vue.js
   |--workPlace
        |--Money.js
        |--Getup.js
        |--Workplace.js
|--index.js
|--AppRouter.js
|--index.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 代码

AppRouter.js

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
//--关键代码------------start
import Video from './Pages/Video'
//--关键代码------------end
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    <li> <Link to="/">博客首页</Link> </li>
                    <li><Link to="/video/">视频教程</Link> </li>
                  <li><Link to="/workplace">职场技能</Link> </li>
                </ul>
            </div>

            <div className="rightMain">
                <Route path="/"  exact component={Index} />
                <Route path="/video/"   component={Video} />
                <Route path="/workplace/"   component={Workplace} />
            </div>
          </div>
      </Router>
    );
  }

  export default AppRouter;

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

index.css

body{
    padding: 0px;
    margin: 0px;
}

.mainDiv{
    display: flex;
    width: 100%;
}
.leftNav{
    width: 16%;
    background-color: #c0c0c0;
    color:#333;
    font-size:24px;
    height: 1000px;
    padding: 20px;
}
.rightMain{
    width: 84%;
    height:1000px;
    background-color: #fff;
    font-size:20px;

}
.topNav{
    height:50px ;
    background-color: #cfdefd;
}
.topNav ul{
   display: flex; 
   margin: 0px;
   padding: 0px;
}
.topNav li{
   padding: 10px;
   text-align: center;
   list-style: none;
 }
 .videoContent{
     padding:20px;
 }

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

ReactPage.js

import React from "react";
function Reactpage(){
    return (<h2>我是React页面</h2>)
}
export default Reactpage;

1
2
3
4
5

Flutter.js

import React from "react";
function Flutter(){
    return (<h2>我是Flutter页面</h2>)
}
export default Flutter;

1
2
3
4
5

Vue.js

import React from "react";
function Vue(){
    return (<h2>我是Vue页面</h2>)
}
export default Vue;

1
2
3
4
5

Video.js

import React from "react";
import {  Route, Link  } from "react-router-dom";
import Reactpage from './video/ReactPage'
import Vue from './video/Vue'
import Flutter from './video/Flutter'
function Video(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/video/reactpage">React教程</Link></li>
                    <li><Link to="/video/vue">Vue教程</Link></li>
                    <li><Link to="/video/flutter">Flutter教程</Link></li>
                </ul>
            </div>
            <div className="videoContent">
                <div><h3>视频教程</h3></div>
                <Route path="/video/reactpage/"   component={Reactpage} />
                <Route path="/video/vue/"   component={Vue} />
                <Route path="/video/flutter/"   component={Flutter} />
            </div>
        </div>
    )
}
export default 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
25

Money.js

import React from "react";
function Money(){
    return (<h2>程序员加薪秘籍详情</h2>)
}
export default Money;

1
2
3
4
5

Getup.js

import React from "react";
function Getup(){
    return (<h2>程序员早起攻略详情</h2>)
}
export default Getup;

1
2
3
4
5

Workplace.js

import React from "react";
import {  Route, Link  } from "react-router-dom";
import Money from './workPlace/Money'
import Getup from './workPlace/Getup'


function WorkPlace(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/workplace/Moeny">程序员加薪秘籍</Link></li>
                    <li><Link to="/workplace/Getup">程序员早起攻略</Link></li>

                </ul>
            </div>
            <div className="videoContent">
                <div><h3>职场软技能</h3></div>
                <Route path="/workplace/Moeny/"   component={Money} />
                <Route path="/workplace/Getup/"   component={Getup} />

            </div>
        </div>
    )
}
export default WorkPlace;

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

# 2.例子后台动态获取路由进行配置

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import Video from './Pages/Video'
import Workplace from './Pages/Workplace'
import './index.css'

function AppRouter() {
    let routeConfig =[
      {path:'/',title:'博客首页',exact:true,component:Index},
      {path:'/video/',title:'视频教程',exact:false,component:Video},
      {path:'/workplace/',title:'职场技能',exact:false,component:Workplace}
    ]
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    {
                      routeConfig.map((item,index)=>{
                          return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
                      })
                    }
                </ul>
            </div>

            <div className="rightMain">
                    {
                      routeConfig.map((item,index)=>{
                          return (<Route key={index} exact={item.exact} path={item.path}  component={item.component} />)
                      })
                    }

            </div>
          </div>
      </Router>
    );
  }


  export default AppRouter;

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

# 参考

https://jspang.com/

← 02.React高级指引 04.React-hooks在ts中使用 →