React中的路由react-router

Router 的基本使用！

我们需要npm 下载react-router：

npm install react-router --save

BrowserRouter或HashRouter

Router中包含了对路径改变的监听，并且会将相应的路径传递给子组件；
BrowserRouter使用history模式；
HashRouter使用hash模式；

Link和NavLink

通常路径的跳转是使用Link组件，最终会被渲染成a元素；
是在Link基础上增加了一些样式属性；
Link中最重要的属性，用于设置跳转到的路径；

Route

Route用于路径的匹配；
path属性：用于设置匹配到的路径；
element属性：设置匹配到路径后，渲染的组件；
exact：精准匹配，只有精准匹配到完全一致的路径，才会渲染对应的组件；

创建第一个路由：
要使用react-router 创建第一个路由首先我们需要在总入口文件里引入：

import { BrowserRouter } from 'react-router-dom'  //引入react-router-dom模块包  包裹根目录AppReactDOM.render(<React.StrictMode><BrowserRouter><App /></BrowserRouter></React.StrictMode>,document.getElementById('root')
);

这是从 react-router-dom 库导入的第一个组件。它用于包装不同的路线，它使用HTML5 history API来跟踪React应用程序中的路由历史记录。

之后我们在 App.js 文件里引用该下列方法：
我们需要使用Routes 包裹住Route 来注册路由
Route 里面path属性是路径，element是该路径所对应的组件。

//引入Routes包裹Route  Route设置路由  Link跳转路径，相当于a标签
import { Routes, Route, Link, NavLink } from 'react-router-dom'function App() {return (<div className="App"><Routes>{/* 通过定义route内的path和element，确定每一个路径path对应的组件element */}<Route path='/' element={<Home />} /<Route path='/newone' element={<Newone />} />{/* 如果路径地址不存在的话 */}<Route path='*' element={<NotFound />} /><Route path='/about' element={<About />}>{/* 默认路由 */}<Route path='' element={<Dz />} />{/* 二级路由 about的子路由 */}<Route path='/about/address' element={<Dz />} /><Route path='/about/yhq' element={<Yhq />} />{/* 如果路径地址不存在的话 */}<Route path='*' element={<NotFound />} /></Route></Routes></div>);
}export default App;

下面使用 NavLink 进行一个跳转相当于a标签：

<NavLink to="/">首页</NavLink>
<NavLink to="/about">about页</NavLink>

跳转路由：
当然，我们也可以跳转路由，但是我们react 不想vue那样使用 push，go，replace进行一个跳转；
我们需要引入 useNavigate 方法，注意我们这里使用这些api方法，必须在函数式组件内使用；
请看以下代码片段：

//跳转路由
import { useNavigate } from 'react-router-dom'function Home() {//使用引入的useNavigate方法  声明一个对象let navigate = useNavigate()return (<div>我是home组件{/* 跳转路由的按钮 */}<input type="button" value="跳转about组件" onClick={() => { navigate('/about') }} /></div>)}
export default Home;

React中的路由react-router相关推荐

25、react 中使用路由 router 详解
react 中使用路由 router 详解今天开始最新的一个模块,也是 react 开发中最重要的一部分,就是路由. SPA 理解我们使用原生的 HTML + CSS + JavaScript 开 ...
react中函数式组件React Hooks
React Hooks 函数式组件使用hooks理由高阶组件为了复用,导致代码层级复杂生命周期的复杂写成functional组件,无状态组件,因为需要状态,又改成了class,成本高在16. ...
react中html转换,React中的HTML转义写法
在JSX中输出固定内容直接使用UTF-8字符 {代码...} 使用HTML转义字符 {代码...} 或者十进制的转义字符 {代码...} 动态内容的转义但是如果在外面加一层大括号的话,react为 ...
React动画和路由
1.过渡动画 React并没有提供过渡动画操作,组件的过渡动画需要依赖第三方模块:transition 安装 yarn add react-transition-group 单元素过渡动画 impor ...
React中添加class——借助第三方库classnames
一.vue中添加class vue中添加class是一件非常简单的事情: 你可以通过传入一个对象: 你也可以传入一个数组: 甚至是对象和数组混合使用: 二.React中添加class React在JS ...
React中diff算法的理解
React中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分,然后针对该部分进行DOM操作,而不用重新渲染整个页面,渲染整个DOM结构的过程中开销是很大的,需要浏览器对DO ...
React 中constructor 作用
React 中constructor 作用 react中的constructor大体有两个作用 1.初始化this.state 2.纠正方法的this的指向 constructor(props) {s ...
React学习(十)-React中编写样式CSS(styled-components)
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 VX-ID:suibichuanji 点 ...
React学习(九)-React中发送Ajax请求以及Mock数据
虽互不曾谋面,但希望能和你成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊撰文 | 川川 VX-ID:suibichuanji 点 ...

React中的路由react-router

Router 的基本使用！

React中的路由react-router相关推荐

最新文章

热门文章