前言:正在学习react大众点评项目课程的todoList应用阶段,学习react、redux、react-router基础知识。
一、客户端路由和服务端路由
二、React Router相关库
- react-router
- react-router-dom(直接使用)
- react-router-native
1.<Router>
<BrowserRouter>
<HashRouter>
//src->app.js
import React, { Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import Nav from "./Nav";
class App extends Component {
render() {
return (
<Router>
<div>
<Nav />
<Switch>
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route path="/" exact component={Home} /> //兜底组件
</Switch>
</div>
</Router>
);
}
}
export default App;
2.<BrowserRouter>
HTML5 history API(pushState, replaceState)
需要Web服务器额外配置
3.<HashRouter>
使用url的hash部分作为路由信息
主要为了兼容老版本浏览器
三、路由配置:Route
- path
- match
//src->app.js <Route path="/user/:user" component={User} />
//src->User.js import React, { Component } from 'react' class User extends Component { render() { const { match } = this.props return ( <div> User: {match.params.user} </div> ); } } export default User;
四、路由匹配
默认情况下,react Router中每一个Route都会和应用的url地址进行匹配
- exact:url和path完全相同的情况下,Route才会被匹配成功
- <Switch>:只会去匹配第一个被匹配到的Route
五、路由渲染组件的方式
<Route component>
<Route path="/" exact component={Home} />
<Route path="/" exact component={() => <Home/>} />
缺点:每次调用时都会重新渲染一个组件
<Route render>
<Route path="/about" render={(props) => </About {...props}/>} />
<Route children>
<Route
path="/contact"
children={props => <div>{props.match ?
"active" : "inactive"}</div>}
/>
可以根据是否匹配成功,显示出不同的内容
六、React Router 4 全新思维
- 一切皆组件
- 动态路由的离散式声明方式:不再需要集中在某一个文件内显示
//src->app.js
<Route path="/user" component={User} />
//src->User.js
import React, { Component } from 'react';
import {Route} from 'react-router-dom'
import UserDetail from './UserDetail'
class User extends Component {
render() {
const {match} = this.props
return (
<div>
<Route path={`${match.path}/:user`} component={UserDetail} />
</div>
);
}
}
export default User;
//src->UserDetail.js
import React, { Component } from 'react';
class UserDetail extends Component {
render() {
const {match} = this.props
return (
<div>
UserDetail: {match.params.user}
</div>
);
}
}
export default UserDetail;
注:项目来自慕课网