React-Router路由配置

React路由使用react-router-dom实现,它提供了BrowserRouterRouteLink等api,可以通过dom事件控制路由。

添加react-router-dom

1
yarn add react-router-dom

新建两个组件aaa.jsbbb.js

1
2
3
4
5
6
7
8
9
10
11
12
import React, { Component } from 'react';

class AAA extends Component {
render() {
return (
<div>
<h1>AAA</h1>
</div>
)
}
}
export default AAA;
1
2
3
4
5
6
7
8
9
10
11
12
import React, { Component } from 'react';

class BBB extends Component {
render() {
return (
<div>
<h1>BBB</h1>
</div>
)
}
}
export default BBB;

将刚刚的两个组件,和react-router-dom中的一些api导入首页app.js。这里用了BrowserRouter,当然也可以用HashRouter,差别就是地址栏有没有#。比如用HashRouter地址栏就是:http://localhost:3000/#/

1
2
3
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
import AAA from './aaa';
import BBB from './bbb';

然后在Dom里用Link来改变地址栏的url,注意LinkRoute这些api都需要写在<BrowserRouter>

1
2
3
4
5
6
<BrowserRouter>
<div className="App">
<Button type="primary"><Link to='/aaa'>导航A</Link></Button>
<Button><Link to='/bbb'>导航B</Link></Button>
</div>
</BrowserRouter>

此时点击按钮可以看到地址栏是改变的,会变成http://localhost:3000/aaahttp://localhost:3000/bbb

然后,在下方加上要通过路由切换的组件,当path为aaa或者bbb的时候分别加载AAABBB

1
2
3
4
5
6
7
8
9
10
<BrowserRouter>
<div className="App">
<Button type="primary"><Link to='/aaa'>导航A</Link></Button>
<Button><Link to='/bbb'>导航B</Link></Button>
<Switch>
<Route path="/aaa" exact component={AAA} />
<Route path="/bbb" exact component={BBB} />
</Switch>
</div>
</BrowserRouter>

此时,在浏览器中点击两个按钮,就能看到下方可以切换两种组件。

完整代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React from 'react';
import { Button, Row } from 'antd';
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';
import AAA from './aaa';
import BBB from './bbb';

class RouterTest extends React.Component {
constructor(props) {
super(props);
}

render() {
return (
<BrowserRouter>
<div className="App">
<Row type="flex" justify="center">
<Button type="primary"><Link to='/aaa'>导航A</Link></Button>
<Button><Link to='/bbb'>导航B</Link></Button>
</Row>
<Row type="flex" justify="center">
<Switch>
<Route path="/aaa" exact component={AAA} />
<Route path="/bbb" exact component={BBB} />
</Switch>
</Row>
</div>
</BrowserRouter>
);
}
}

export default RouterTest;

这是最简单的一个路由的实现。在实际的开发中,一般来讲我们会在上方或左侧简历导航栏,通过给导航栏元素添加<Link>来加载页面剩下的内容。听起来有点像iframe?但是路由切换不会像iframe一样直接加载一个页面进来,只是通过路径匹配组件的切换。

当然,实际的开发中我们也不会这么不规范的直接把路由都写在首页里,一般会单写一个router.js专门负责路由的控制。在后面的Dva框架中,我们会看到Dva把路由、公用组件、模型文件、服务文件等在创建工程时就帮我们分类好了,这样整个工程结构就非常清晰。

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :