1、安装
yarn add react-router-dom
2、在app.js内引入router
import { BrowserRouter, Route } from 'react-router-dom'
3、使用BrowserRouter作为容器,Route作为路由规则填写path等路径,exact为完全符合path才可展示。
import React, { Component, Fragment } from 'react';
import { GlobalStyle } from "./style";
import { GlobalIconfont } from './statics/iconfont/iconfont'
import Header from './common/header'
import { Provider } from 'react-redux'
import { BrowserRouter, Route } from 'react-router-dom'
import store from './store'
class App extends Component {
render() {
return (
<Fragment>
<Provider store={store}>
<div>
<GlobalStyle/>
<GlobalIconfont/>
<Header />
<BrowserRouter>
<div>
<Route path='/' exact render={()=><div>home</div>}></Route>
<Route path='/detail' exact render={()=><div>detail</div>}></Route>
</div>
</BrowserRouter>
</div>
</Provider>
</Fragment>
);
}
}
export default App;
4、以上是基础用法,但是通常我们不会把页面写在这里,而是用组件的方式引入。
例如添加pages/home页面:
import React, { Component } from 'react'
class Home extends Component {
render() {
return (
<div>Home</div>
)
}
}
export default Home
在app.js内引入,并加入Route规则中
import React, { Component, Fragment } from 'react';
import { GlobalStyle } from "./style";
import { GlobalIconfont } from './statics/iconfont/iconfont'
import Header from './common/header'
import { Provider } from 'react-redux'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './pages/home'
import Detail from './pages/detail'
import store from './store'
class App extends Component {
render() {
return (
<Fragment>
<Provider store={store}>
<div>
<GlobalStyle/>
<GlobalIconfont/>
<Header />
<BrowserRouter>
<div>
<Route path='/' exact component={Home}></Route>
<Route path='/detail' exact component={Detail}></Route>
</div>
</BrowserRouter>
</div>
</Provider>
</Fragment>
);
}
}
export default App;