一、react路由的配置:
1、找到官方文档 https://reacttraining.com/react-router/web/example/basic
2、安装 【cnpm install react-router-dom --save】
3、找到项目的根组件引入react-router-dom
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
4、复制官网文档根组件里面的内容进行修改(加载的组件要提前引入)。大致结构如下:
<Router>
<div>
<Route exact path="/" component={ComA} />
<Route path="/b" component={ComB} />
</div>
</Router>
二、路由传值(也可以理解为页面传值)
方法1:react动态路由传值:
1、动态路由配置:<Route path="/c/:cid" component={ComC} />
跳转:<Link to="/c/12">ComC</Link>
2、对应跳转的组件里面获取值:this.props.match.params.cid 。请参考下面代码ComC.js文件。
方法2:react get传值:
1、跳转:<Link to="/d?did=34">ComD</Link>
2、获取值: this.props.location.search
说明:此时获取的值是字符串格式:"?did=34",需要用url模块来解析一下,也可以自己定义方法解析。
url模块使用步骤:step1:安装【cnpm install url --save】。
step2:引入: import url from 'url';
step3:使用:url.parse(this.props.location.search, true).query 获取传参对象。请参考下面代码ComD.js文件。
三、实现js跳转路由
step1:要引入Redirect:import { Redirect } from "react-router-dom";
step2:在state中,定义一个flag为false。
step3:render里面判断flag,来决定是否跳转:
if (this.state.flag) {
return <Redirect to={{ pathname: '/' }} />
}
step4:在点击跳转事件中改变flag为true,之后重新render即可实现跳转。请参考下面代码ComB.js文件。
以下面代码为例,详细理解新建路由、路由传值以及js跳转路由:
RouterABC.js组件:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import ComA from './ComA'
import ComB from './ComB'
import ComC from './ComC'
import ComD from './ComD'
class RouterABC extends Component {
constructor(props) {
super(props);
this.state = { };
}
render() {
return (
<Router>
<ul>
<li>
<Link to="/">ComA</Link>
</li>
<li>
<Link to="/b">ComB</Link>
</li>
{/* 下面是两个传值的 */}
{/* 1、动态路由传值 */}
<li>
<Link to="/c/12">ComC</Link>
</li>
{/* 2、get传值 */}
<li>
<Link to="/d?did=34">ComD</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={ComA} />
<Route path="/b" component={ComB} />
<Route path="/c/:cid" component={ComC} />
<Route path="/d" component={ComD} />
</Router>
);
}
}
export default RouterABC;
说明:上面的exact表示严格匹配,不添加这个的话,那么"localhost:3000/b"会同时显示ComA和ComB组件的内容。
ComB.js组件:
import React, { Component } from 'react';
import { Redirect } from "react-router-dom";
class ComB extends Component {
constructor(props) {
super(props);
this.state = {
flag: false
};
}
jump = () => {
this.setState({
flag: true
})
}
render() {
if (this.state.flag) {
return <Redirect to={{ pathname: '/' }} />
// 或者下面的写法:
// return <Redirect to='/' />
}
return (
<div>ComB页面
<br></br>
<button onClick={this.jump}>点击跳转到ComA页面</button>
</div>
);
}
}
export default ComB;
ComC.js组件:
import React, { Component } from 'react';
class ComC extends Component {
constructor(props) {
super(props);
this.state = { };
console.log(this.props.match.params.cid);
}
render() {
return (
<div>ComC页面---接收传过来的值为:{this.props.match.params.cid}</div>
);
}
}
export default ComC;
ComD.js组件:
import React, { Component } from 'react';
import url from 'url';//通过url模块来解析url地址
class ComD extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
console.log(this.props.location.search);//打印“?did=34”
console.log(url.parse(this.props.location.search, true));
var did = url.parse(this.props.location.search, true).query.did;
console.log(did);//打印“34”
}
render() {
return (
<div>ComD页面---接收传过来的值为:{url.parse(this.props.location.search, true).query.did}</div>
);
}
}
export default ComD;
出来的动态效果界面如下:
四、路由模块化:
把路由放在一个文件中,方便管理。
新增的router.js文件:
import ComA from '../components/ComA'
import ComB from '../components/ComB'
import ComC from '../components/ComC'
import ComD from '../components/ComD'
let routes = [
{
path: "/",
component: ComA,
exact: true
},
{
path: "/b",
component: ComB
},
{
path: "/c/:cid",
component: ComC
},
{
path: "/d",
component: ComD
}
]
export default routes;
上面例子中的RouterABC.js可以改成下面这样:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import routes from '../model/router'
class RouterABC extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<Router>
...
{
routes.map((route, key) => {
if (route.exact) {
return <Route key={key} exact path={route.path} component={route.component} />
} else {
return <Route key={key} path={route.path} component={route.component} />
}
})
}
</Router>
);
}
}
export default RouterABC;
涉及到路由的嵌套部分,上面路由模块化还需要改成下面这样:
return <Route key={key} exact path={route.path}
render={props => (
<route.component {...props} routes={route.routes} />
)
} />