![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React-Router
白小宇
学识的基础是创造的基础。
展开
-
React-Router实战:基本路由、路由传参、嵌套路由
安装 > npm install -g create-react-app > create-react-app demo-app > cd demo-app > npm install react-router-dom 一、基本路由(Dome1) 1、目录及 组件关系图 目录结构: 组件关系: 2、源码 ./index.js import React原创 2019-03-17 17:53:27 · 4679 阅读 · 2 评论 -
React-Router实战:NavLink
基础: (1)引入使用: import { NavLink } from 'react-router-dom' <NavLink to="/about"> About </NavLink> (2)activeClassName:string //当被激活时,显示类名为selected 的css样式 <NavLink to="/about" activ...原创 2019-03-23 17:09:41 · 6486 阅读 · 0 评论 -
React-Router实战:路由传参(正则表达式)
首先我们先做个路由普通传参的例子。 一、准备工作 1、目录结构 | - index.js | - components | - App => App.js | - Home => Home.js | - About => About.js | - News => News.js 2、源码 ./index.js i...原创 2019-03-23 18:23:30 · 5689 阅读 · 0 评论 -
React-Router实战:重定向Redirect
当用户访问某界面时,该界面并不存在,此时用Redirect重定向,重新跳到一个我们自定义的组件里。 一、基础 1、引入使用 // 如果loggedIn 为 false, 则重定向跳转到 /home 页面 import { Route, Redirect } from 'react-router' <Route exact path="/" render={() => ( ...原创 2019-03-23 18:55:45 · 74930 阅读 · 9 评论