React 使用 react-router-dom 配置路由
一、什么是 react-router-dom
React-router-dom 提供了 BrowserRouter,Route,Link 等 api,我们可以通过 dom 的事件控制路由
二、react-router-dom 的安装
在项目根目录终端引入:
npm install react-router-dom --save-dev
三、react-router-dom 的使用
这里新建两个组件,分别为“home”和“detail”:
在 src 下新建 containers 文件夹,里面分别新建存有 index.js 的 Home 文件夹和 Hetail 文件夹
(1)home/index.js
import React from 'react';
class Home extends React.Component {
render() {
return (
<div>Home</div>
)
}
}
export default Home;
(2)detail/index.js
import React from 'react';
class Detail extends React.Component {
render() {
return (
<div>Detail</div>
)
}
}
export default Detail;
(3)在 src 的 index.js 文件中引入上面两个组件和 react-router-dom:
import {
BrowserRouter,
Route,
Switch
} from 'react-router-dom';
import Home from './containers/Home/';
import Detail from './containers/Detail/';
在 render() 中将两个页面组件 Home 和 Detail 使用 Route 组件包裹,外面套用 Switch 作路由匹配,当路由组件检测到地址栏与 Route 的 path 匹配时,就会自动加载响应的页面
<BrowserRouter>
<Switch>
<Route path='/detail' component={Detail} />
<Route path='/' component={Home} />
</Switch>
</BrowserRouter>
(4)运行效果: