路由介绍
1.安装react-router-dom
1.1 在项目命令行中,执行
cnpm install react-router-dom -S
2.路由使用
- HashRouter表示一个路由的根容器,将来所有的路由相关的东西,都要包裹在HashRouter里面,而且一个网站中,只需要使用一次HashRouter就好了;
- Route表示一个路由规则,在Route上,有两个比较重要的属性,path,component
- Link表示一个路由的链接
2.1 先引入路由模块
import {HashRouter,Route,Link} from 'react-router-dom’
2.2 注意:
-
Route 组件path地址是以/开头 ,配置component属性,是显示的组件,这个属性不可以大写
-
Route组件可以单双标签使用,单标签需要/结尾,双标签不可以在中间写入别的东西
-
Link to属性的地址也是/开头,Link在页面渲染的是a标签
例:
render(){
return (
<HashRouter>
<div>
<h1>这是网站的根目录</h1>
<hr />
<Link to="/home">首页</Link>
<Link to="/movie/">电影</Link>
<Link to="/about">关于</Link>
<hr />
<Route path="/home" component={Home} ></Route><hr/>
<Route path="/movie" component={Movie} exact></Route><hr/>
<Route path="/about" component={About}></Route><hr/>
</div>
</HashRouter>
);
}
3.路由传值
3.1、React-router-dom路由传值
通过配置路由的地址,在Link跳转时
- Route path路径后面 /:id
- Link to 路径后面 /top/10
- 接收传值:
- class类组件,this.props.match.params.属性名
- 函数组件:形参.match.params.属性名
3.2 在Route内置组件中,配置path地址:
<Route path="/movie/:type/:id" component={Movie} exact></Route>
3.3 在Link内置组件中,配置to属性,进行跳转:
<Link to="/movie/top/10">电影</Link>
例:
render(){
return (
<HashRouter>
<div>
<h1>这是网站的根目录</h1>
<hr />
<Link to="/movie/top/10">电影</Link>
<hr />
<Route path="/movie/:type/:id" component={Movie} exact></Route>
</div>
</HashRouter>
);
}
3.4 类组件中通过生命周期进行接收,this.props携带路由传递过来的数据:
class Movie extends React.Component{
constructor(props){
super();
this.state = {
routeParams:props.match.params
}
}
render(){
console.log(this);
return (
<div>
电影--{this.state.routeParams.type}--{this.state.routeParams.id}
</div>
);
}
}
3.5 函数组件中通过形参接收传递过来的值,props形参,函数组件作为路由组件,props就是传递过来的对象,里面携带着路由传递过来的数据
import React from 'react'
export default function home(props) {
return (
<div>
{props.match.params.id}
</div>
)
}
4嵌套路由
4.1 嵌套路由:在路由组件中,使用Link, Route,配置子路由,实现跳转,
4.2 下面为一级路由,在一级路由Home为路由组件
<Route path="/home" component={ Home }></Route>
4.3 在Home组件中继续使用Link,Route进行路由的嵌套,需要注意的就是路由地址,前部分为一级路由地址,后面接一个二级路由相应的路径
render() {
return (
<div>
<ul>
<li><Link to="/home/a">推荐</Link></li>
<li><Link to="/home/b">新时代</Link></li>
<li><Link to="/home/c">动漫</Link></li>
</ul>
<Route path="/home/a" component={ A }></Route>
<Route path="/home/b" component={ B }></Route>
<Route path="/home/c" component={ C }></Route>
</div>
)
}
5.完整案例:
路由首页:
import React from 'react';
import Sy from './Sy';
import {HashRouter,Link,Route} from 'react-router-dom';
import { Button,Icon} from "antd";
import "antd/dist/antd.css";
class Ly extends React.Component{
render(){
return(
<HashRouter>
<div>
<h3>这是首页</h3>
<Link to="/Sy">首页</Link>
<Route path="/Sy" component={Sy}></Route>
<Button type="dashed" icon="sketch">按钮</Button>
</div>
</HashRouter>
)
}
}
export default Ly;
一级路由子页:
import React from 'react';
import {Link,Route} from 'react-router-dom';
import Sy2 from './Sy2';
class Sy extends React.Component{
render(){
return(
<div>
<Link to="/Sy/sy2">首页1</Link>
<Route path="/Sy/sy2" component={Sy2}></Route>
</div>
)
}
}
export default Sy;
路由嵌套路由子页:
import React from 'react';
class Sy2 extends React.Component{
render(){
return(
<ul>
<li>首页2</li>
</ul>
)
}
}
export default Sy2;
展示效果:
一级路由效果图:
解释:点击第一个首页,出现首页1
路由嵌套路由效果图:
解释:点击第一个首页1,出现首页2