React-Router简单了解（上）

---

一、React-Router安装与基础环境搭建

1、使用create-react-app 脚手架初始化项目

• npm install -g create-react-app安装脚手架
• -g代表的是系统全局安装的意思
• npm start 预览项目

2、使用npm 安装React Router

• npm install --save react-router-dom

3、简单的使用

• index.js

import React from 'react';
import ReactDOM from 'react-dom'
import AppRouter from './AppRouter'

ReactDOM.render(<AppRouter/>,document.getElementById('root'))

• 组件AppRouter.js

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

function Index() {
  return <h2>JSPang.com</h2>;
}

function List() {
  return <h2>List-Page</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;

---

二、组件使用React Router

1、 Index 组件

• Index.js

import React, { Component } from 'react';

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

export default Index;

2、List组件

• List.js

import React, { Component } from 'react';

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

export default List;

3、将两个组件引入到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>
        <Route path="/" exact component={Index} />
        <Route path="/list/" component={List} />
    </Router>
  );
}

export default AppRouter;

---

三、exact精准匹配的意思

• 比如把Index的精准匹配去掉，会发现，无论在地址栏输入什么都可以匹配到Index组件，这并不是想要的结果。

---

四、React Router动态传值

1、React上设置允许动态传值

• 这个设置是以:开始的，然后紧跟着传递的key（键名称）名称。

2、Link 上传递值

• 设置好规则后，就可以在Link上设置值了，现在设置传递的ID值了，这时候不用再添加id了，直接写值就可以了。

• 列表

• 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} />
    </Router>
  );
}

export default AppRouter;

3、在List 组件上接受并显示传递值

• 组件接收传递过来的值的时候，可以在声明周期componentDidMount中进行，传递的值在this.props.match中

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>List Page</h2> );
    }
    //-关键代码---------start
    componentDidMount(){
        console.log(this.props.match)
    }
    //-关键艾玛---------end
}

export default List;

• 然后在浏览器的控制台中可以看到打印出的对象，对象包括三个部分:

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

• 明白了match中的对象属性，就可以轻松取得传递过来的ID值了。

import React, { Component } from 'react';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>List Page->{this.state.id}</h2> );
    }
    componentDidMount(){
       // console.log(this.props.match.params.id)
       let tempId=this.props.match.params.id
        this.setState({id:tempId })
    }
}

export default List;

• 这样就实现了动态传值，需要注意的是如果你不传任何东西，是没办法匹配路由成功

4、模拟一个列表数组

• 现在可以在Index组件里模拟一个列表数组，就相当于我们从后台动态获取到的内容，然后数组中包括文章的cid和title

 constructor(props) {
    super(props);
    this.state = { 
        list:[
            {cid:123,title:'个人博客-1'},
            {cid:456,title:'个人博客-2'},
            {cid:789,title:'个人博客-3'},
        ]
    }
}

• 有了list数组后，再修改一下UI，进行有效的遍历

render() { 
    return ( 
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return (
                        <li key={index}> {item.title} </li>
                    )
                })
            }
        </ul>
    )
}

• 列表已经可以在Index组件里显示出来了，接下来可以配置了,在配置之前，你需要先引入Link组件

• import { Link } from "react-router-dom";

• 引入后直接使用进行跳转就可以，但是需要注意一点，要用{}的形式，也就是把to里边的内容解析成JS的形式，这样才能顺利的传值过去

render() { 
    return ( 
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return (
                        <li key={index}>
                            <Link to={'/list/'+item.uid}> {item.title}</Link> 
                        </li>
                    )
                })
            }
        </ul>
    )
}

---