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）運行效果：