0%

React Router简单Demo

简介

react router是使用react的时候首选的一个路由工具。

安装

react router包含react-router,react-router-dom和react-router-native这三个包,分别是路由核心组件和浏览器端组件和native端组件,所以我们需要安装react-router-dom

1
npm install --save react-router-dom

安装后就可以直接使用了

https://codepen.io/pshrmn/pen/YZXZqM?editors=1010

这里有一个只有一个js文件的demo,我是根据这个demo来改成用多个文件的demo的

正式开始

index.js配置

首先你需要在index.js里面引入BrowserRouter组件,这个组件是作为路由器的选择。

你的选择可以有两种BrowserRouter和HashRouter

当存在服务区来管理动态请求时,需要使用组件,而被用于静态网站。

引入后index.js为

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';
import ReactDOM from 'react-dom';
import './assets/css/index.css';
import App from './pages/App';
import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter} from 'react-router-dom'

ReactDOM.render((
<BrowserRouter>
<App/>
</BrowserRouter>
), document.getElementById('root'));
registerServiceWorker();
添加被路由的组件

添加两个测试用的组件内容随意 test和test2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { Component } from 'react';
import '../assets/css/App.css';

class App extends Component {
render() {
return (
<div className="App">
<p className="App-intro">
this is test
</p>
</div>
);
}
}
export default App;
添加路由的组件router.js

先上代码吧,很简单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';
import test2 from './pages/Test2.js'
import test from './pages/Test.js'
import {Switch,Route} from 'react-router-dom'


const router = () => (
<Switch>
<Route exact path='/test' component={test}/>
<Route path='/test2' component={test2}/>
</Switch>
)

export default router;

首先引入react,不引入的话不会识别jsx语法

然后引入两个测试组件和react-router-dom

其中所有的路由需要用Switch来包括

然后所有的路由需要用Route组件来写

path属性是路由地址,component是地址的组件

这些就可以定义我们路由跳转的页面了

app.js中设置跳转

先看代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from 'react';
import {Link} from 'react-router-dom'
import Router from './../router.js'

class App extends Component {
render() {
return (
<div>
<li><Link to='/test'>test</Link></li>
<li><Link to='/test2'>test2</Link></li>
<Router></Router>
</div>
);
}
}

export default App;

引入react-router-dom的Link组件,然后引入我们编写好的Router

然后用Link去跳转到对应的路由地址

然后在Router组件里面展示当前路由的页面

Router是用来显示对于路由的页面的

总结

这里只是简单的路由的使用

总结一下就是只需要在入口处定义路由类型,然后设置路由的对应组件,然后再跳转到对应的路由就可以显示不同路由的组件了

参考资料

https://segmentfault.com/a/1190000010174260#articleHeader16