react进阶（二）——react-router基本使用和匹配规则

react-router的安装

 在项目根目录运行命令

npm install react-router-dom / yarn add react-router-dom

初始化自己的项目

 删去初始项目src所有的文件，还原一个干净的src
 在src目录下新建index.js（必须有的一个文件，因为他是入口文件）和App文件，代码部分如下：
 index.js代码

import React from 'react'
import {render} from 'react-dom'
import App  from './App'
render(<App/> , document.getElementById('root'));//因为容器的id是root，出口文件index.html里有

 App.js代码

import React, {Component} from 'react'

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
	//每个组件有且仅有一个根标签
	//若你觉得根标签的div太多了，可将最外围的div标签换成React.Fragment标签
	//在打包的时候不会将React.Fragment渲染出来，dom树也不存在更多的div
    render() {
        return (
            <div>

            </div>
        );
    }
}

最基本的使用react-router

• 首先简单地创建三个组件，然后改进render函数

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

function Index() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (
		     <Router>
		      <div>
		        <nav>
		          <ul>
		            <li>
		              <Link to="/">Home</Link>
		            </li>
		            <li>
		              <Link to="/about/">About</Link>
		            </li>
		            <li>
		              <Link to="/users/">Users</Link>
		            </li>
		          </ul>
		        </nav>
		
		        <Route path="/" exact component={Index} />
		        <Route path="/about/" component={About} />
		        <Route path="/users/" component={Users} />
		      </div>
		    </Router>
        );
    }
}

注意：我解释一下react-router的使用方法

• 路由器(Router)常用的有两种：BrowserRouter和HashRouter，这两种的区别就是：前面的以服务器的方式启动路由(http://localhost:3000/xxxx)，而后面的则带有hash值，具体的路径是 http://localhost:3000/#/xxxx
• 路由（Route）必须包含在路由器里面，不然会报错，因为他会根据你的浏览器的路径来匹配路由器里的路由规则(path)，然后转到相应的“坑”(component)，而这个坑就是路由规则的出口组件
• 我们常在根路径加上exact，这是必须的，因为你不加exact的话他总会匹配到根路径，所以请记住如果一个路由里面包含多条子路由，子路由里面又有多条孙路由，请在当前自己的根路径加上exact
• 路由链接（Link或NavLink）是用来跳转到相应组件的，不会发出请求。Link和NavLink两者的主要区别就是后者默认可以设置激活样式（activeStyle:object或添加activeClassName设置激活样式），而前者只是用来跳转的一个链接。但是两者都会被打包成a标签

路由的匹配规则是如何匹配的？

 这里我借用官网的例子解释

import { Route, Switch } from "react-router-dom";

// 当浏览器地址是/about
<Route path='/about' component={About}/> // 匹配成功，填坑（渲染About组件）
<Route path='/contact' component={Contact}/> // 匹配失败，不填坑（渲染失败）
// 因为他没有指定路径 ，所以他总是能匹配，填坑（渲染Always组件）
<Route component={Always}/> 

//Switch就相当于开关，你只能匹配其中一条路由规则或者匹配失败
<Switch>
  <Route exact path="/" component={Home} />//当浏览器地址严格是 / 时，填坑（渲染Home组件）
  <Route path="/about" component={About} />//当浏览器地址是 /about 时，填坑（渲染About组件）
  <Route path="/contact" component={Contact} />//当浏览器地址是 /contact 时，填坑（渲染contact组件）
    <Route component={NoMatch} /> //没有指定路径，那就选他作为匹配的路由规则，填坑（NoMatch组件）
</Switch>

好了，这一章就到这里，下一章我会介绍嵌套路由和路由传值，下一章有点难，请各位将本章知识消化一下。