React.js之router路由使用

傷城~ 2022-11-20 05:50 166阅读 0赞

#### 1.React router安装及环境搭建 ####

cnpm install -g create-react-app
    create-react-app demo10
    cd demo10
    yarn start
    ## 安装React router
    cnpm install --save react-router-dom

#### 2.编写一个简单的路由程序 ####

在src下创建一个AppRouter.js文件，然后写入以下代码。

import React from "react";
    import {  BrowserRouter as Router, Route, Link } from "react-router-dom";
    //引入Index和List组件，还未创建
    import Index from './Pages/Index'
    import List from './Pages/List'
    
    //exact 精准匹配 
    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;

然后创建src/Pages/Index.js 和 List.js。

#Index.js
    import React, {  Component } from 'react';
    
    class Index extends Component { 
        constructor(props) { 
            super(props);
            this.state = {   }
        }
        render() {  
            return (  <h2>Index页面</h2> );
        }
    }
    
    export default Index;

#List.js
    import React, {  Component } from 'react';
    
    class List extends Component { 
        constructor(props) { 
            super(props);
            this.state = {   }
        }
        render() {  
            return (  <h2>List页面</h2> );
        }
    }
    
    export default List;

#### 3.动态传值 ####

在Route上设置运行动态传值，设置是以`:`开始的，然后紧跟着你传递的key（键名称）名称。

然后在Link上传递值。

在List组件上接收并显示值。首先我们在List组件中，调用生命周期函数componentDidMount，如下：

componentDidMount(){ 
            console.log(this.props.match)
     }
    #打印出的对象，对象包括三个部分:
    #patch:自己定义的路由规则，可以清楚的看到是可以产地id参数的。
    #url: 真实的访问路径，这上面可以清楚的看到传递过来的参数是什么。
    #params：传递过来的参数，key和value值。

然后我们将拿到的值，渲染到页面。

import React, {  Component } from 'react';
    
    class List extends Component { 
        constructor(props) { 
            super(props);
            this.state = {   }
        }
        render() {  
            return (  <h2>List页面->{ this.state.id}</h2> );
        }
        componentDidMount(){ 
            this.setState({ id:this.props.match.params.id })
        }
    }
    
    export default List;

#### 4.重定向-Redirect使用 ####

##### 标签式重定向 #####

首先我们先在创建Home组件，并在AppRouter.js中加入Route配置，并引入Home组件。

#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;

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

然后在Index组件中，使用标签式重定向到Home组件。

import {  Link , Redirect } from "react-router-dom";
    <Redirect to="/home/" />

##### 编程式重定向 #####

#在Index组件构造函数constructor中加入下面的重定向代码。
    this.props.history.push("/home/");

个人博客：[Karma‘s Blog][Karma_s Blog]  
源码地址：[传送门][Link 1]

[Karma_s Blog]: http://karma520.com/2020/11/04/37%20React-router%E8%B7%AF%E7%94%B1/
[Link 1]: https://github.com/kay-520/React_study