怎么安装react-router

怎么安装react-router

安装命令:npm install react-router

react-router路由提供了一些router的核心api,包括Router, Route, Switch等,但是它没有提供dom操作进行跳转的api。

React-Router提供了两个组件:Router和Route。下面看最简单的例子:

src/Routes.js

import React from 'react'
import {Router,Route,browserHistory} from 'react-router'

import Home from './pages/Home.js'
import About from './pages/About.js'
import NotFound from './pages/NotFound.js'

const history = browserHistory;
const Routes = () =>(
  <Router history = {browserHistory}>
    <Route path = "home" component = {home}>
    <Route path = "about" component = {About}>
    <Route path = "*" component = {NotFound}>
  </Router >
);
export default Routes;

Routes.js文件返回一个组件,该组件输出一个Router组件实例,路由及其规则都封装在里面,Route组件内的path和component把路径和组件对应起来。

路由链接:

HTML的链接被点击时会发生默认跳转,这不符合单页面应用的要求,所以React-Router提供了一个<Link>组件来支持路由链接。

1.<link>组件产生html链接。

2.对该链接的点击不会引发跳转,而是把目标路径发送给Router,让Router依据关联显示对应的组件。

3.<Link>组件的to指向一个路径,对应的路径在Router中应该有定义。

import React from 'react'
import {Link} from 'react-router'

const view = ()=>{
  <div>
    <ul>
      <li><Link to="/home">Home</Link></li>
      <li><Link to="/about">About</Link></li>
    </ul>  
  </div>
};

嵌套:

Route提供了嵌套功能。路由的嵌套和组件层级的显示是对应的。当我们触发了子路由的跳转时,父层路由显示的东西可以依然保留在页面上,只有子层路由对应的组件发生变更。

比如在src/pages/App.js中定义组件App:

import React from 'react'
import {view as TopMenu} from '../components/TopMenu'

const App = ({children}) =>{
  return (
    <div>
      <TopMenu />
      <div>{children}</div>
    </div>
  )
}
export default App

上面代码中children是App的子组件。这是React中原生的特性。

React-Router中路由嵌套需要组件和Route的双边设置:

在组件中将children获得的子组件在恰当位置渲染;

在Route中 ,则是设置嵌套的<Route>

const Routes = ()=>(
  <Router history = {browserHistory}>
    <Route path = "/" component = {App}>
      <Route path = "hone" component={home} />
      <Route path = "hone" component={home} />
      <Route path = "hone" component={home} />
    </Route>
  </Route>
);
Image placeholder
前端答疑
未设置
  97人点赞

没有讨论,发表一下自己的看法吧

推荐文章
怎么看有没有安装react

怎么看有没有安装react一、查看本机是否安装了react的方法●打开cmd输入npmlist-g--dept0有react则已全局安装●进入C:\Users\xxx\AppData\Roaming\

怎么下载安装react?

1、首先,要安装Node.js及NPM。可以去官网下载最新的版本:https://nodejs.org/下载好之后一直点击下一步,安装完成!!!查看安装情况:按下win+r键打开运行,输入cmd回车,

全局安装react脚手架在哪装?

全局安装react脚手架在哪装?全局安装react脚手架在任何目录下都可以,因为和当前所在目录没有关系。一、全局安装react脚手架npminstall-gcreate-react-app -g参数表

怎么封装react组件

怎么封装react组件1、封装自己的组件使用es6的扩展类的方式,在基类中扩展组件。importReact,{Component}from'react'; classClickCounterexten

angular material怎么安装?

怎么安装angularmaterial?1、前期准备:npm(安装node即可),angularcli脚手架2、自建项目ngnewmy-app//my-app项目名字 nggcproject//组件名

jquery怎么安装?

jQuery设计的宗旨是“writeLess,DoMore”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操

vue-cli怎么安装?

vuecli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了batteries-included的

最新 React Router 全面整理

Reactrouter已经到了V5版本,增加了基于ReactHooks的一些API,比如useParams、useHistory等等,让我们可以在组件中不接受routeprops就可以拿到路由信息{m

IBM Spectrum Protect 8.1.7在AIX7.1上的安装和配置

                                                本文作者: 谷铁柏摘要:    本文章主要讲述IBMSpectrumProtect8.1.7版本在AIX

Go语言高级编程_5.2 router 请求路由

5.2router请求路由 在常见的Web框架中,router是必备的组件。Go语言圈子里router也时常被称为http的multiplexer。在上一节中我们通过对Burrow代码的简单学习,已经

基于JS的高性能Flutter动态化框架MXFlutter

导语:18年10月份,手机QQ看点团队尝试使用Flutter,做为iOS开发,一接触到Flutter就马上感受到,Flutter虽然强大,但不能像RN一样动态化是阻碍我们使用她的唯一障碍了。看Goog

如何在浏览器中获取 Production Mode 的 React 实例

https://github.com/LiuuY/Blog...在ProductionMode下,React并没有暴露其实例。无论什么原因如果你要获取的话可以参考以下方法。条件浏览器安装了ReactD

怎么在react中安装修饰器

怎么在react中安装修饰器在create-react-app下使用es7的@修饰器会报错''Supportfortheexperimentalsyntax'decorators-legacy'isn

怎么检查react全局安装

怎么检查react全局安装检查react全局安装可以使用npm命令npmlist-g--depth0。按下win+r打开运行,输入cmd打开命令提示符,输入命令即可。C:\Users\Administ

你真的了解 React 吗?这里有 50 个 React 面试问题

如果你是一位有理想的前端开发人员,并且正在准备面试,那么这篇文章就是为你准备的。本文收集了React面试中最常见的50大问题,这是一份理想的指南,让你为React相关的面试做好充分的准备工作。首先我

React Hooks 完全指南,读React作者博文感悟(2W字精华)

阅读facebook大佬:DanAbramov的文章颇有感悟大佬github地址https://github.com/gaearon 重点总结 useEffect是同步的 状态是捕获的当前props

使用kubei一步部署k8s高可用集群(包含docker安装、k8s组件安装、master初始化和加入nodes节点)

kubei(kubernetesinstaller)是一个go开发的用来部署kubernetes高可用集群的命令行工具,该工具可在Windows、Linux、Mac中运行kubei原理:通过ssh连接

Go语言高级编程_3.8 例子:Goroutine ID

3.8例子:GoroutineID 在操作系统中,每个进程都会有一个唯一的进程编号,每个线程也有自己唯一的线程编号。同样在Go语言中,每个Goroutine也有自己唯一的Go程编号,这个编号在pani

goroutine

goroutine本质上是大号版的异步执行句柄,比之nodejs中的单线程事件循环处理器。之所以在使用goroutine,感觉不到异步,在于golang已经封装了各种异步io操作,运行时一旦发现异步

大话 goroutine

goroutine本质上是大号版的异步执行句柄,比之nodejs中的单线程事件循环处理器。之所以在使用goroutine,感觉不到异步,在于golang已经封装了各种异步io操作,运行时一旦发现异步

go学习笔记-goroutine竞争状态

如果两个或者多个goroutine在没有相互同步状态的情况下同时访问某个资源,并且同时对这个资源进行读写的时候,对于这个资源就处于相互竞争状态(racecandition)。下面来看一个相互竞争的例子

gMIS吉密斯十年执念:Lower Costs较低成本Better Productivity较高效率

Hello2020!元旦快乐!今起揭开21世纪20年代的篇章.1.gMIS吉密斯十周年2010-2020,十年转眼已成历史,gMIS吉密斯——通用管理信息系统(generalManagementInf

electron+vue实现div contenteditable功能|截图

最近在学习基于electron+electron-vue开发聊天客户端项目时,需要用到编辑器插入表情功能。一般通过input或textarea也能实现,通过插入[笑脸]、(:12这些标签,展示的时候解

Reactor系列(十九)StepVerifier测试

java#reactor#flux#StepVerifier测试视频讲解:https://www.bilibili.com/vide...FluxMonoTestCase.javapackagecom

create-react-app兼容ie11配置

今天闲来无事折腾一下create-react-app,发现主流浏览器都没有问题。但是ie11却一直报错,真是倔强的很啊。我翻了下create-react-app的文档,从中看到了正好有对ie9、ie1