react英文版官网: https://reacttraining.com/react-router/
一.仿照官网来个小案例(声明式路由)
1.安装React路由
cnpm i --save react-router-dom
2.创建一个新的router.js文件,并在App.js中导入这个路由文件
3.在router.js文件中粘贴官方的第一个路由案例;
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
}
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Topics({ match }) {
return (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>Rendering with React</Link>
</li>
<li>
<Link to={`${match.url}/components`}>Components</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>Props v. State</Link>
</li>
</ul>
<Route path={`${match.path}/:topicId`} component={Topic} />
<Route
exact
path={match.path}
render={() => <h3>Please select a topic.</h3>}
/>
</div>
);
}
function Topic({ match }) {
return (
<div>
<h3>{match.params.topicId}</h3>
</div>
);
}
export default BasicExample;
4.实现效果:
上面就是声明式路由的写法,解释:
1.BrowserRouter as Router: //这个as是起别名的意思,这句话的意思是BrowseerRouter起别名为Router,这样在下面的标签里就可以直接使用<Router></Router>了。
2.总体的步骤分为三步:
a.配置路由的容器Router;
b.配置路由的连接LInk;
c.配置路由填充的位置以及路径和组件的映射关系;
上面的Topics是一个嵌套路由:
疑惑点解释:
总结嵌套路由的步骤:
a.在父路由的组件中配置子路由;
b.子路由中同样需要配置Link和Route;
5.路由的参数传递
方式:在路由的路径中通过[:参数名称]来进行传递,改参数在路由匹配的组件中通过[match.params.参数名]来获取。
英文官网案例:
6.路由的重定向
路由的重定向通过来重定向。
官网附带了一个登录权限的逻辑代码,网站地址:https://reacttraining.com/react-router/web/example/basic
ps:
1.官网的重命名写法
2.使用箭头函数事件可以不用绑定this.操作如下:
7.404页面
import React from 'react'
import { BrowserRouter as Router, Link, Route, Redirect,Switch} from 'react-router-dom'
class RouterTest extends React.Component {
constructor(props) {
super(props)
this.state = {
flag: false
}
}
handleClick=()=>{
this.setState({
flag:true
})
}
render() {
return (
<div>
<Router>
<div>
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to='/NoMatch'>NoMatch</Link>
</li>
</ul>
<button onClick={this.handleClick}>点击跳转</button>
<hr />
<Switch>
<Route exact path="/home" component={Home} />
<Route path="/about" component={About} />
<Route component={NoMatch} />
{this.state.flag&&<Redirect to='/about'/>}
</Switch>
</div>
</Router>
</div>
)
}
}
const Home=()=> {
return (
<div>
<h2>Home</h2>
</div>
);
}
const About=()=>{
return (
<div>
<h2>About</h2>
</div>
);
}
const NoMatch=()=>{
return (
<div>
404
</div>
)
}
export default RouterTest;
实现效果:
二.编程式路由的跳转
步骤:
先安装路由,安装好后操作
1.在路由官网的redirect重定向里有一个withRouter,按照官网的导入方式到进来
import {withRouter} from 'react-router-dom'
2.将这个组件包裹起来
export default withRouter(Login)
3.在提交登录的事件里,先解构赋值const {history}=this.props(这解构的意思是将this.props对象里的history属性拿出来,后面可以直接使用),判断可以登录时,直接用编程式导航跳转到首页(history.push(’/home’))即可。
react英文版官网: https://reacttraining.com/react-router/
react中文版官网:http://react-guide.github.io/react-router-cn/docs/Introduction.html