首页
登录 | 注册

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)运行效果:

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

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

 


相关文章

  • Springcloud Gateway 路由管理
    Spring Cloud Gateway 是 Spring Cloud 的一个全新项目,该项目是基于 Spring 5.0,Spring Boot 2.0 和 Project Reactor 等技术开发的网关,它旨在为微服务架构提供一种简单 ...
  • 如何在电脑上配置两个tomcat
    问题 准备逐渐转向idea的怀抱了,每次部署项目时和eclipse使用的都是同一个tomcat,这是很大的隐患,并且非常的不方便,遂再配置一个tomcat 1.下载tomcat和配置系统变量 CATALINA_HOME是Tomcat的安装目 ...
  • 1.什么是跨越? 一个网页向另一个不同域名/不同协议/不同端口的网页请求资源,这就是跨域. 跨域原因产生:在当前域名请求网站中,默认不允许通过ajax请求发送其他域名. 2.为什么会产生跨域请求? 因为浏览器使用了同源策略 3.什么是同源策 ...
  • 前言 本文也会在github上我的web-study仓库中同步更新,欢迎star. 戳这里,传送 准备工作 判断是否需要FQ或安装镜像,镜像一般可安装国内淘宝镜像,详情可看这里:cnpm npm install -g cnpm --regi ...
  • 如何零基础开始自学Python编程
    转载——原作者:赛门喵 链接:https://www.zhihu.com/question/29138020/answer/141170242 0. 明确目标 我是真正零基础开始学Python的,从一开始的一窍不通,到3个月后成功搭建了一个 ...
  • 补习系列(20)-大话 WebSocket 与 &quot;尬聊&quot;的实现
    目录 一.聊聊 WebSocket 二.Stomp 是个什么鬼 三.SpringBoot 整合 WebSocket A. 引入依赖 B. WebSocket 配置 C. 控制器 D. 前端实现 四.参考文档 一.聊聊 WebSocket 从 ...

2019 cecdns.com webmaster#cecdns.com
12 q. 0.073 s.
京ICP备10005923号