淘先锋技术网

首页 1 2 3 4 5 6 7

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
源码地址:传送门