React使用react-router-dom配置路由

Posted 2022-07-05 leophen

一、什么是 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）运行效果：