1.1、单页面应用
单页面得特点:只需要加载一次主页面,通过局部刷新,就可以实现跳转或者切换页面
优点:加载速度快,用户体验比较好
缺点:
- 第一次加载比传统要慢一点
- 不利seo
- 页面相对复杂
- 返回键
二. 路由的安装
1.2、安装react-router-dom
在项目命令行中,执行: `cnpm install react-router-dom -S`
三.路由内置组件
在组件中通过对象的解构方式去获取到react-router-dom
内置组件,在组件中,按需引入内置组件,在页面中进行使用:
- HashRouter表示一个路由的根容器,将来所有的路由相关的东西,都要包裹在HashRouter里面,而且一个网站中,只需要使用一次HashRouter就好了;
- Route表示一个路由规则,在Route上,有两个比较重要的属性,path,component
- Link表示一个路由的链接
import {HashRouter,Route,Link} from 'react-router-dom'
示例:
//引入模块
import React from 'react';
import { HashRouter, Route, Link } from 'react-router-dom'
import Home from './component/Home';
import News from './component/News';
import About from './component/About';
class App extends React.Component {
render() {
return (
<HashRouter>
<h2>这是根目录</h2>
<hr></hr>
<Link to='/home/aa/a.html'>主页</Link>
<Link to='/news/hh/b.html'>新闻</Link>
<Link to='/about/cc/c.oo'>关于</Link><br />
<Route path="/home" component={Home}></Route>
<Route path="/news" component={News}></Route>
<Route path="/about" component={About}></Route>
</HashRouter>
);
}
}
export default App;
注: 在一个HashRouter中,只能有唯一的一个根元素。 在一个网站中,只需要使用唯一的一次<HashRouter></HashRouter>
就行了。
Route创建的标签,就是路由规则,其中path表示要匹配的路由,component表示要展示的组件。Route具有两种身份:
1.它是一个路由匹配规则;
2.它是一个占位符,表示将来匹配到的组件都放到这个位置
需要注意的地方
- Route 组件path地址是以/开头 ,配置component属性,是显示的组件,这个属性不可以大写
- Route组件可以单双标签使用,单标签需要/结尾,双标签不可以在中间写入别的东西
- Link to属性的地址也是/开头,Link在页面渲染的是a标签
1.1、React-router-dom路由传值(带参数路由)
通过配置路由的地址,在Link跳转时
-
Route path路径后面 /:id (key)
-
Link to 路径后面 /top/10 (value)
接收传值:
-
class类组件,this.props.match.params.属性名
-
函数组件:形参.match.params.属性名
示例:
render(){
return (
<HashRouter>
<div>
<h1>这是网站的根目录</h1>
<hr />
//在Link内置组件中,配置to属性,进行跳转:
<Link to="/movie/top/10">电影</Link>
<hr />
// 在Route内置组件中,配置path地址:
<Route path="/movie/:type/:id" component={Movie} exact></Route>
</div>
</HashRouter>
);
}
类组件中通过生命周期进行接收,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>
);
}
}
四.嵌套路由.
嵌套路由:在路由组件中,使用Link, Route,配置子路由,实现跳转,切换;
下面为一级路由,在一级路由Home为路由组件
完整示例:
//引入模块
import React from 'react';
import { HashRouter, Route, Link } from 'react-router-dom'
import Home from './component/Home';
import News from './component/News';
import About from './component/About';
class App extends React.Component {
render() {
return (
<HashRouter>
<h2>这是根目录</h2>
<hr></hr>
<Link to='/home/aa/a.html'>主页</Link>
<Link to='/news/hh/b.html'>新闻</Link>
<Link to='/about/cc/c.oo'>关于</Link><br />
<Route path="/home" component={Home}></Route>
<Route path="/news" component={News}></Route>
<Route path="/about" component={About}></Route>
</HashRouter>
);
}
}
export default App;
import React from 'react';
import {Route, Link } from 'react-router-dom'
import Social from './News/Social';
class News extends React.Component {
render() {
return (
<React.Fragment>
<Link to="/news/social">社会</Link>
<Route path="/news/social" component={Social}></Route>
</React.Fragment>
);
}
}
export default News;
import React from 'react'
class Social extends React.Component {
render() {
return (
<h2>社会</h2>
);
}
}
export default Social;
- 效果:
今天就分享到这儿,如有不同意见欢迎提出!!