React路由规则定义与声明式导航及编程式导航分别介绍
1. 路由使用
安装路由模块:
路由模块不是react自带模块,需要安装第3方模块:
yarn add react-router-dom@5
路由相关组件:
路由模式组件:包裹整个应用,一个React应用只需要使用一次
- HashRouter: 使用URL的哈希值实现 (
localhost:3000/#/first
) - BrowserRouter:使用H5的history API实现(
localhost3000/first
)
导航组件:用于指定导航链接, 最终Link会编译成a标签
- Link: 不会有激活样式
- NavLink:如果地址栏中的地址和 to 属性相匹配,则会有激活样式
路由规则定义组件:指定路由规则和对应匹配成功后要渲染的组件
Route:
- path属性:路由路径,在地址栏中访问的地址
- component属性:和规则匹配成功后渲染的组件 /render/children
各组件关系示意图:
定义路由的模式:
为了日后让当前项目中所有的组件都受到路由控制,定义在index.js中,在最顶层定义路由模式。src/index.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './utils/init' // 引入路由相关组件 路由模式组件,告诉当前项目,我们要使用的路由模式 // HashRouter hash路由模式 // BrowserRouter history路由模式,上线时,需要对nginx进行配置 import { BrowserRouter as Router, HashRouter } from 'react-router-dom' ReactDOM.render( <Router> <App /> </Router>, document.getElementById('root') )
定义路由规则:
路由规则组件可以定义在src/index.js
文件中,也可以定义在App组件中。
本次定义在src/App.js
文件中。
import React, { Component } from 'react' // Route 定义路由规则 路由地址和匹配成功后要渲染的组件 import { Route } from 'react-router-dom' // 匹配成功后渲染的组件 import Home from './views/Home' import About from './views/About' class App extends Component { render() { return ( <div> <h3>App组件</h3> <hr /> {/* 定义路由规则 */} <Route path="/home" component={Home} /> <Route path="/about" component={About} /> </div> ) } } export default App
2. 声明式导航
描述:
使用 Link 或 NavLink 组件完成声明式导航的定义、
Link/NavLink 区别:
- Link组件不会根据路由的变化而添加或修改编译后html标签中的属性
- NavLink会根据路由的变化而自动修改编译后html标签中的属性
如果当前的路由规则和 Navlink 中的 To 所写的规则一致则添加 class 样式,
默认名称为 active,可以通过 activeClassName 来修改匹配成功后样式名称。
使用:
import React, { Component } from 'react' // Route 定义路由规则 路由地址和匹配成功后要渲染的组件 // Link 导航组件,它编译生成后的html标签只能是 a // NavLink 导航组件,它编译生成后的html标签只能是 a,但是它有激活样式(地址栏中的地址和to属性匹配,就有内置样式名) import { Route, Link, NavLink } from 'react-router-dom' // 匹配成功后渲染的组件 import Home from './views/Home' import About from './views/About' class App extends Component { render() { return ( <div> <h3>App组件</h3> <div> {/* <Link to="/home">Home</Link> --- <Link to="/about">About</Link> */} {/* NavLink 匹配规则,默认为模糊匹配 严格匹配:exact 修改激活样式名称:activeClassName='aaa' */} {/* <NavLink exact activeClassName='aa' to="/">Home</NavLink> --- */} <NavLink exact to="/">Home</NavLink>--- <NavLink to="/about">About</NavLink> </div> <hr /> {/* 定义路由规则 */} {/* 匹配默认为模糊匹配,而且它还会一直匹配到没有规则组件为止 严格匹配:exact */} <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> </div> ) } } export default App
利用 Switch 严格匹配路由:
import React, { Component } from 'react' // Route 定义路由规则 路由地址和匹配成功后要渲染的组件 // Link 导航组件,它编译生成后的html标签只能是 a // NavLink 导航组件,它编译生成后的html标签只能是 a,但是它有激活样式(地址栏中的地址和to属性匹配,就有内置样式名) // Switch 多个路由规则只匹配一个 import { Route, Link, NavLink, Switch } from 'react-router-dom' // 匹配成功后渲染的组件 import Home from './views/Home' import About from './views/About' class App extends Component { render() { return ( <div> <h3>App组件</h3> <div> {/* <Link to="/home">Home</Link> --- <Link to="/about">About</Link> */} {/* NavLink 匹配规则,默认为模糊匹配 严格匹配:exact 修改激活样式名称:activeClassName='aaa' */} {/* <NavLink exact activeClassName='aa' to="/">Home</NavLink> --- */} <NavLink exact to="/">Home</NavLink>--- <NavLink to="/about">About</NavLink> </div> <hr /> {/* 定义路由规则 */} {/* 匹配默认为模糊匹配,而且它还会一直匹配到没有规则组件为止 严格匹配:exact */} <Switch> <Route path="/about" component={About} /> {/* 注意这个规则要放在最后,否则所有路由都会走 home 页面 */} <Route path="/" component={Home} /> </Switch> </div> ) } } export default App
重定向和404:
import React, { Component } from 'react' // Route 定义路由规则 路由地址和匹配成功后要渲染的组件 // Link 导航组件,它编译生成后的html标签只能是 a // NavLink 导航组件,它编译生成后的html标签只能是 a,但是它有激活样式(地址栏中的地址和to属性匹配,就有内置样式名) // Switch 多个路由规则只匹配一个 // Redirect 重定向 使用它,一定要用到Switch,否则有死循环的问题 import { Route, Link, NavLink, Switch, Redirect } from 'react-router-dom' // 匹配成功后渲染的组件 import Home from './views/Home' import About from './views/About' // import Detail from './views/Detail' import Notfound from './views/Notfound' class App extends Component { render() { return ( <div> <h3>App组件</h3> <div> <NavLink exact to="/">Home</NavLink>--- <NavLink to="/about">About</NavLink> </div> <hr /> <Switch> {/* 如果你想用对于匹配渲染成功后的组件使用编程式导航,你默认情况下,你只能在规则匹配成功后的组件本身中使用,它的子组件都不行 */} <Route path="/home" component={Home} /> <Route path="/about" component={About} /> {/* 重定向 */} <Redirect exact from="/" to="/home" /> {/* 以上的路由没有一个匹配成功的,则用404页面 path属性不要写 */} <Route component={Notfound} /> </Switch> </div> ) } } export default App
3. 编程式导航
App.jsx:
import React, { Component } from 'react' import { Route, Link, NavLink, Switch, Redirect } from 'react-router-dom' // 匹配成功后渲染的组件 import Home from './views/Home' import About from './views/About' // import Detail from './views/Detail' import Notfound from './views/Notfound' class App extends Component { render() { return ( <div> <h3>App组件</h3> <div> <NavLink exact to="/">Home</NavLink>--- <NavLink to="/about">About</NavLink> </div> <hr /> <Switch> {/* 如果你想用对于匹配渲染成功后的组件使用编程式导航,你默认情况下,你只能在规则匹配成功后的组件本身中使用,它的子组件都不行 */} <Route path="/home" component={Home} /> <Route path="/about" component={About} /> {/* 重定向 */} <Redirect exact from="/" to="/home" /> {/* 以上的路由没有一个匹配成功的,则用404页面 path属性不要写 */} <Route component={Notfound} /> </Switch> </div> ) } } export default App
home组件:
import React, { Component } from 'react' import Btn from './Btn' class Home extends Component { jumpUrl = () => { // 写法1 // this.props.history.push('/about') // 写法2 this.props.history.push({ pathname: '/about' }) } render() { return ( <div> <h3>首页展示</h3> <button onClick={this.jumpUrl}>home组件中回关于</button> <Btn {...this.props} /> </div> ) } } export default Home
btn组件:
import React, { Component } from 'react' class Btn extends Component { jumpUrl = () => { this.props.history.push('/about') } render() { return <button onClick={this.jumpUrl}>在btn组件中回关于</button> } } export default Btn
注意:
- 如果你想用对于匹配渲染成功后的组件使用编程式导航,默认情况下,你只能在规则匹配成功后的组件本身中使用,它的子组件都不行
- 直接匹配的路由的子组件要想使用编程式导航,则需要给他传递 props
到此这篇关于React路由规则定义与声明式导航及编程式导航分别介绍的文章就介绍到这了,更多相关React路由规则内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/weixin_45605541/article/details/127033
相关文章
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
- 这篇文章主要介绍了react+ts实现简单jira项目,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-30
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02- 本文主要介绍了react为什么不推荐使用index作为key,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-22
- 这篇文章主要介绍了react自动化构建路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23
- 这篇文章主要介绍了React Class组件生命周期,包括react组件的两种定义方式和class组件不同阶段生命周期函数执行顺序,本文给大家介绍的非常详细,需要的朋友可以参考下...2021-08-14
- 本篇文章主要介绍了React组件通信详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-10-15
- 这篇文章主要介绍了React中组件之间通信的方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-27
- 众所周知,react推出了hooks之后,很多项目就开始往hooks上靠拢,所以也就出现了class和hooks交叉使用的项目。这个时候使用ref需要注意一些东西...2021-06-20