2020-03-12

React Router教程

React项目的可用的路由库是 React-Router ,当然这也是官方支持的。它也分为:

  • react-router 核心组件

  • react-router-dom 应用于浏览器端的路由库(单独使用包含了react-router的核心部分)

  • react-router-native 应用于native端的路由

以下教程我们都以Web端为主,所以所有的教程内容都是默认关于react-router-dom的介绍。

进行网站(将会运行在浏览器环境中)构建,我们应当安装 react-router-domreact-router-dom 暴露出 react-router 中暴露的对象与方法,因此你只需要安装并引用 react-router-dom 即可。

官方文档地址: [https://reacttraining.com/react-router/web/guides/philosophy](https://reacttraining.com/react-router/web/guides/philosophy

Installation | 安装

安装:


yarn add react-router-dom

# 或者,不使用 yarn

npm install react-router-dom

路由的基本概念

现在的React Router版本中已不需要路由配置,现在一切皆组件。

ReactRouter中提供了以下三大组件:

  • Router是所有路由组件共用的底层接口组件,它是路由规则制定的最外层的容器。

  • Route路由规则匹配,并显示当前的规则对应的组件。

  • Link路由跳转的组件

当然每个组件下又会有几种不同的子类组件实现。比如: Router组件就针对不同功能和平台对应用:

  • <BrowserRouter> 浏览器的路由组件

  • <HashRouter> URL格式为Hash路由组件

  • <MemoryRouter> 内存路由组件

  • <NativeRouter> Native的路由组件

  • <StaticRouter> 地址不改变的静态路由组件

三大组件使用的关系:

image.png

如果说我们的应用程序是一座小城的话,那么Route就是一座座带有门牌号的建筑物,而Link就代表了到某个建筑物的路线。有了路线和目的地,那么就缺一位老司机了,没错Router就是这个老司机。

第一个Demo

现在你可以复制任意的示例代码,并粘贴到 'src/App.js'。如下:


import React, { Component } from 'react';

import { HashRouter as Router, Link, Route } from 'react-router-dom';

import './App.css';

const Home = () => (

 <div>

 <h2>Home</h2>

 </div>

)

const About = () => (

 <div>

 <h2>About</h2>

 </div>

)

const Product = () => (

 <div>

 <h2>Product</h2>

 </div>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的。它也分...
    Skll2阅读 708评论 0 0
  • React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的。它也分...
    哦_7888阅读 656评论 0 0
  • React Router教程 React项目的可用的路由库是 React-Router ,当然这也是官方支持的。它...
    zui最烦起名字阅读 871评论 0 0
  • React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的。它也分...
    konner_5d7d阅读 803评论 0 0
  • 2006年3月14日 星期二 郭靳,今天是你回郧县婆婆家的第四天,二姨打电话让你叫我,你却敷衍的叫了一声妈咪后...
    听雨聆声阅读 1,189评论 0 1