这篇文章主要简单的介绍一下react的路由部分，我个人觉得学好一个框架，可以熟悉的掌握一个框架的router部分是非常重要的，因为路由关系到整个项目的结构，可以让我们构建复杂的应用程序。今天主要通过以下小案例讲一下react router的基本用法，以及稍微复杂点的路由嵌套。
react router的安装和环境搭建
react router是基于react之上的一个强大的路由库，在使用它之前我们先进行简单的安装。
① 安装脚手架（如已安装，请忽略此步）： npm install -g create-react-app
② 通过脚手架创建新的项目： create-react-app react-router-demo
③ 使用npm安装react router： npm install --save react-router-dom
安装完成啦~ npm start启动项目
路由跳转的Demo
场景：我们要实现从一个父组件AppRouter分别跳转到子组件Home和子组件List中
① 先创建子组件Home
import React, { Component } from 'react';
class Home extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( <h2>这是home组件</h2> );
}
}
export default Home;
② 再创建子组件List
import React, { Component } from 'react';
class List extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( <h2>这是List组件</h2> );
}
}
export default List;
③ 最后创建父组件AppRouter
import React from "react";
// 重新定义BrowserRouter为Router， Link相当于是a标签
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
// 引入要跳转的两个组件
import Home from './Pages/Home'
import List from './Pages/List'
function AppRouter() {
return (
<Router>
<ul>
{/* 点击这两个链接，进行相应的跳转 */}
<li><Link to="/">首页</Link> </li>
<li><Link to="/list/">列表</Link> </li>
</ul>
{/* exact是精确匹配 component是对应的显示的视图组件 */}
<Route path="/" exact component={Home} />
<Route path="/list/" component={List} />
</Router>
);
}
export default AppRouter;
reactRouter的动态传值
应用场景： 当点击任何一个链接，需要可以准确的打开详细的文章内容，这就需要靠传递文章ID来进行实现。不同的链接传递的ID都是不同的，所以就需要路由有动态传值的能力。
动态路由的步骤
- 设置规则（eg: path="/list/:id"）
- 传递值 (eg: to="/list/123")
- 接收值 (eg: this.props.match 小伙伴可以自己打印一下这个值，看看它到底包含了那些信息)
- 显示内容
// 父组件进行设置规则，并进行动态值的传递
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import List from './page/list';
function AppRouter(){
return(
<Router>
<ul>
{/*② 传值123 */}
<li><Link to="/list/123">列表页</Link></li>
{/* ① :id是设置规则 */}
<Route path="/list/:id" component={List}/>
</ul>
</Router>
)
}
export default AppRouter;
// 跳转到的详细页面，进行值的接收和展示
import React, { Component } from 'react';
class List extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( <h2>显示接收的路由参数->{this.state.id}</h2> );
}
componentDidMount(){
// ③ 路由接收值 通过props来接收，传递的值在this.props.match中
// patch: 自己定义的路由规则，可以获取id的参数。
// url: 真实的访问路径，这上面可以清楚的看到传递过来的参数是什么。
// params：传递过来的参数，key和value值。
let tempId = this.props.match.params.id; // id的是自己定义的变量名
this.setState({id: tempId});
}
}
export default List;
reactRouter的路由重定向
重定向和跳转的区别：
跳转是可以用浏览器的回退按钮返回上一级的，而重定向是不可以的。
重定向的两种方式：
标签式重定向: 就是利用<Redirect>标签来进行重定向，业务逻辑不复杂时建议使用这种。
编程式重定向: 这种是利用编程的方式，一般用于业务逻辑当中，比如登录成功跳转到会员中心页面等等。
① 标签式重定向：
import React, { Component } from 'react';
import { Link, Redirect } from "react-router-dom"; // 引入Redirect标签
class Index extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
{/* 点击首页的时候会重定向到home页面 */}
<Redirect to='/home/'/>
<h2>标签式重定向</h2>
</div>
);
}
}
② 编程式重定向：
class Index extends Component {
constructor(props) {
super(props);
// 编程时的重定向 官方文档就是这样写的 业务逻辑复杂的时候这样写
this.props.history.push('/home/')
}
render() {
return (
<div>
<h2>编程式重定向</h2>
</div>
);
}
}
reactRouter的路由嵌套
在实际项目开发中，路由嵌套是很常用的~ 由于嵌套可能涉及到很多个组件，在写案例之前先简单的介绍一下各个组件之间的嵌套关系。
image
① 首先在项目的pages文件下，创建两个简单的一级路由对应的视图Home和List组件。
// Home组件
import React, { Component } from 'react';
class Home extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( <h2>home component </h2> );
}
}
export default Home;
// List 组件
import React, { Component } from 'react';
class List extends Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return ( <h2>List component </h2> );
}
}
export default List;
② 在根项目下创建一个总的路由管理的页面，用来进行一级路由的跳转，这里组件名为AppRouter
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import List from './page/list';
import Home from './page/home'
function AppRouter(){
return(
<Router>
<ul>
<li><Link to="/">首页</Link></li>
<li><Link to="/list/123">列表页</Link></li>
<Route path="/" exact component={Home}/>
<Route path="/list/:id" component={List}/>
</ul>
</Router>
)
}
export default AppRouter;
③ 在根目录下创建一个components文件夹，用来盛放在二级路由要显示的视图。这里仅以Home组件下的二级路由做示例。
和一级路由类似，需要创建一个用来管理二级路由跳转的路由配置组件，比如这里叫做 Video组件
import React from 'react';
import { Route, Link } from 'react-router-dom';
// 这就是二级路由跳转下对应的视图组件
import ReactPage from './video/reactPage';
import Angular from './video/angular';
import Vue from './video/view';
function Video(){
return (
//二级路由 不需要用router进行包裹，这是很重要的一点
<div>
<div className="videoTitle">
<ul>
<li><Link to="/video/reactpage">React教程</Link></li>
<li><Link to="/video/angularpage">Angular教程</Link></li>
<li><Link to="/video/vuepage">Vue教程</Link></li>
</ul>
</div>
<div className="videoContent">
<div>视频教程</div>
<Route path="/video/reactpage" component={ReactPage}/>
<Route path="/video/flutterpage" component={Angular}/>
<Route path="/video/vuepage" component={Vue}/>
</div>
</div>
)
}
export default Video;
根据上面组件的二级跳转，我们还需要有ReactPage，Angular，Vue视图组件,
我们可以把三个组件放到一个文件夹下进行统一管理。
由于这三个组件都是无状态组件，所以我这里就给出其中一个组件的例子就可以了~ 其他两个可以按部就班哦~
eg: 给出ReactPage组件
import React from 'react';
function Reactpage() {
return (<h2>react page页面</h2>)
}
export default Reactpage;
总结
今天的react router就简单的介绍到这里，路由嵌套由于涉及的组件较多，还是希望这个稍微繁琐的介绍，可以帮助大家更好的了解路由的使用~
