React 路由

最新推荐文章于 2023-09-03 00:20:22 发布

zhangli0421

最新推荐文章于 2023-09-03 00:20:22 发布

阅读量602

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/zhangli0421/article/details/124454578

版权

本文介绍了如何在React项目中使用`react-router-dom`，从安装、配置BrowserRouter和HashRouter，到定义路由规则、使用Switch解决匹配问题，以及Link、NavLink和Redirect的用法。通过学习，你可以掌握React应用中的路由管理和导航。

摘要由CSDN通过智能技术生成

1.首先下载路由模块(注意版本)

cnpm install react-router-dom@5

2.在入口文件(app.js)中进行引入路由

1、路由方式

<BrowserRouter/> ：h5路由

<HashRouter>：hash路由

2、路由规则

<Route/>：包裹组件

3、理由选项

<Switch/>：解决匹配问题，按照顺序匹配，如果匹配到前面的后面的就不匹配了。

例如：/path和、path/list这样的，按照顺序path/list会匹配导/path，达不到想要的效果，加上exact关键词做到完全匹配，必须完全一样才能匹配到。

4、跳转导航，相当于a标签

<Link/>：跳转页面

<NavLink/>：增强版的Link

5、自动跳转

<Redirect/>：不用点击，执行到这块就自动跳转

import React, { Component } from 'react'
import Home from '../views/Home'
import About from "../views/About"
import User from '../views/User'
import Notfound from '../views/NotFound'
import { HashRouter, Route,Switch,Redirect }