ReactRouter

最新推荐文章于 2024-05-23 10:16:05 发布
最新推荐文章于 2024-05-23 10:16:05 发布
阅读量185 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： React 文章标签： react router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Aurora_1970s/article/details/117001700

ReactRouter

ReactRouter

1.安装

npm install --save react-router-dom

2.使用
return (
        <Router>
            {/* ul内部的相当于是导航栏  <Route></Route>才是跳转语句 */}
            {/* 每个Route都需要一个path属性，path属性是一个url，当url匹配一个Route时，
            这个Route中component中定义的组件就会被渲染出来。 */}
            {/* exact是精确匹配:地址必须是localhost:3000/才能进入首页，/aaa这种包含/的不能进入 */}
            <ul>
                <li><Link to="/">首页</Link></li>
                <li><Link to="/list/123">列表</Link></li>
            </ul>
            <Route path="/" exact component={Index}></Route>
            <Route path="/list/:id"  component={List}></Route>
            <Route path="/home/"  component={Home}></Route>
        </Router>
    )
标签嵌套在导航栏内，表明跳转地址。

而标签指明对应组件的地址是什么，比如这句话的意思就是如果跳转的地址是"/"，那么就渲染Index组件到页面上去。

格式为

exact表示精确匹配，即地址必须和指定的完全一样才能跳转。

3.动态传值

Router动态传值步骤：

  1. 设置规则

    设置规则格式为:id，即:+key，例如：

    <Route path="/list/:id" component={List} />

  2. 传递值

    在Link标签上直接传值：

     <li><Link to="/list/123">列表</Link> </li>

  3. 接收值

    组件接收传递过来的值的时候，可以在声明周期componentDidMount中进行，传递的值在this.props.match中：

    componentDidMount() {
        console.log(this.props)
        let tempId = this.props.match.params.id
        this.setState({
            id:tempId
        })
    }

  4. 显示内容

    render() { 
        return ( 
        <h2>List-page->{this.state.id}</h2>
         );
}
4.动态传值2

在平常页面中最常见的路由(动态传值)就是文章的列表页和详细页面，即点击文章的标题就可以跳转到文章的详情页面去查看文章。

首先在Index组件中的构造器中构造出初始数据，列表数组，就相当于从后台获取到的数据：

 constructor(props) {
    super(props);
    this.state = { 
        list:[
            {cid:123,title:'小明的个人博客-1'},
            {cid:456,title:'小明的个人博客-2'},
            {cid:789,title:'小明的个人博客-3'},
        ]
    }
}

然后修改一下UI页面使得文章呈列表显示：

 render() { 
    return ( 
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return (
                        <li key={index}> {item.title} </li>
                    )
                })
            }
        </ul>
    )
}

接下去进行路由配置：

先引入Link：

import { Link } from "react-router-dom";

然后编写路由：

render() { 
    return ( 
        <ul>
            {
                this.state.list.map((item,index)=>{
                    return (
                        <li key={index}>
                            <Link to={'/list/'+item.cid}> {item.title}</Link> 
                        </li>
                    )
                })
            }
        </ul>
    )
}
5.重定向

要实现的功能是当进入Index组件时，然后Index组件直接重定向到Home组件。

先随便生成一个Home组件：

import React, { Component } from 'react';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  <h2>我是 Home 页面</h2> );
    }
}

export default Home;

然后在AppRouter.js里加一个<Route>配置，配置时记得要先引入Home组件：

import Home from './Pages/Home'
<Route path="/home/" component={Home} />

标签式重定向：

要实现重定向，需要先在Index.js组件中引入Redirect：

import { Link , Redirect } from "react-router-dom";

引入之后直接在render中使用：

 <Redirect to="/home/" />

编程式重定向：

在构造器中，当组件一渲染的时候就利用JS进行重定向：

constructor(props) {
        super(props);
        this.state = { 
            list:[
                //list中的每一行都是一个对象，具有cid和title两个属性
                {cid:123,title:'小明的个人博客-1'},
                {cid:456,title:'小明的个人博客-2'},
                {cid:789,title:'小明的个人博客-3'}
            ]
         }
         this.props.history.push("/home/")
    }
6.ReactRouter嵌套路由

嵌套路由就是网页中常见的具有一级导航菜单和二级导航菜单的页面，内容随着菜单的不同选择而变化。

首先新建一个Approuter.js作为首页：

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    <li> <Link to="/">博客首页</Link> </li>
                    <li><Link to="">视频教程</Link> </li>
                    <li><Link to="">职场技能</Link> </li>
                </ul>
            </div>

            <div className="rightMain">
                <Route path="/"  exact component={Index} />
            </div>
          </div>
      </Router>
    );
  }

  export default AppRouter;

接着在src目录下新建一个pages文件夹作为一级子菜单文件夹，然后在里面新建video和workplace这两个文件夹作为视频教程和职场技能的文件夹。

然后在index.js中引入Approuter.js并进行渲染：

import React from 'react'
import ReactDOM from 'react-dom'
import AppRouter from './AppRouter'


ReactDOM.render(<AppRouter />, document.getElementById('root'));

为了效果更佳美观，可以在src目录下新建index.css设计样式：

body{
    padding: 0px;
    margin: 0px;
}

.mainDiv{
    display: flex;
    width: 100%;
}
.leftNav{
    width: 16%;
    background-color: #c0c0c0;
    color:#333;
    font-size:24px;
    height: 1000px;
    padding: 20px;
}
.rightMain{
    width: 84%;
    height:1000px;
    background-color: #fff;
    font-size:20px;

}

然后可以在video和workplace这两个文件夹中新建几个子页面用于内容显示。例如ReactPage.js：

import React from "react";
function Reactpage(){
    return (<h2>我是React页面</h2>)
}
export default Reactpage;

接下去就是二级导航页面video.js：

import React from "react";
import {  Route, Link  } from "react-router-dom";
import Reactpage from './video/ReactPage'
import Vue from './video/Vue'
import Flutter from './video/Flutter'


function Video(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/video/reactpage">React教程</Link></li>
                    <li><Link to="/video/vue">Vue教程</Link></li>
                    <li><Link to="/video/flutter">Flutter教程</Link></li>
                </ul>
            </div>
            <div className="videoContent">
                <div><h3>视频教程</h3></div>
                <Route path="/video/reactpage/"   component={Reactpage} />
                <Route path="/video/vue/"   component={Vue} />
                <Route path="/video/flutter/"   component={Flutter} />
            </div>
        </div>
    )
}
export default Video;

然后将二级导航页面引入到主页面，即一级导航页面：

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import Video from './Pages/Video'
import './index.css'

function AppRouter() {
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    <li> <Link to="/">博客首页</Link> </li>
					// 引入二级导航
                    <li><Link to="/video/">视频教程</Link> </li>
                    <li><Link to="">职场技能</Link> </li>
                </ul>
            </div>

            <div className="rightMain">
                <Route path="/"  exact component={Index} />
                // 引入二级导航
                <Route path="/video/"   component={Video} />
            </div>
          </div>
      </Router>
    );
  }

  export default AppRouter;

美化页面(添加在index.css中)：

.topNav{
    height:50px ;
    background-color: #cfdefd;
}
.topNav ul{
   display: flex; 
   margin: 0px;
   padding: 0px;
}
.topNav li{
   padding: 10px;
   text-align: center;
   list-style: none;
 }
 .videoContent{
     padding:20px;
 }

职场技能的二级导航菜单同理

WorkPlace.js：

import React from "react";
import {  Route, Link  } from "react-router-dom";
import Money from './workPlace/Money'
import Getup from './workPlace/Getup'


function WorkPlace(){
    return (
        <div>
            <div className="topNav">
                <ul>
                    <li><Link to="/workplace/Moeny">程序员加薪秘籍</Link></li>
                    <li><Link to="/workplace/Getup">程序员早起攻略</Link></li>

                </ul>
            </div>
            <div className="videoContent">
                <div><h3>职场软技能</h3></div>
                <Route path="/workplace/Moeny/"   component={Money} />
                <Route path="/workplace/Getup/"   component={Getup} />

            </div>
        </div>
    )
}
export default WorkPlace;
7.后台动态获取路由配置

模拟后台得到的JSON数据，在AppRouter.js文件里，模拟从后台得到了JSON字符串，并转换为了对象：

let routeConfig =[
    {path:'/',title:'博客首页',exact:true,component:Index},
    {path:'/video/',title:'视频教程',exact:false,component:Video},
    {path:'/workplace/',title:'职场技能',exact:false,component:Workplace}
]

此时一级导航就不能写死，应该对数据进行遍历：

<ul>
    {
        routeConfig.map((item,index)=>{
            return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
        })
    }
</ul>

按照上面一样把Route遍历配置：

{
    routeConfig.map((item,index)=>{
        return (<Route key={index} exact={item.exact} path={item.path}  component={item.component} />)
    })
}

AppRouter.js全部代码：

import React from "react";
import { BrowserRouter as Router, Route, Link  } from "react-router-dom";
import Index from './Pages/Index'
import Video from './Pages/Video'
import Workplace from './Pages/Workplace'
import './index.css'

function AppRouter() {
    let routeConfig =[
      {path:'/',title:'博客首页',exact:true,component:Index},
      {path:'/video/',title:'视频教程',exact:false,component:Video},
      {path:'/workplace/',title:'职场技能',exact:false,component:Workplace}
    ]
    return (
      <Router>
          <div className="mainDiv">
            <div className="leftNav">
                <h3>一级导航</h3>
                <ul>
                    {
                      routeConfig.map((item,index)=>{
                          return (<li key={index}> <Link to={item.path}>{item.title}</Link> </li>)
                      })
                    }
                </ul>
            </div>

            <div className="rightMain">
                    {
                      routeConfig.map((item,index)=>{
                          return (<Route key={index} exact={item.exact} path={item.path}  component={item.component} />)
                      })
                    }

            </div>
          </div>
      </Router>
    );
  }


  export default AppRouter;
HTML-ul无序、ol有序和dl定义列表和列表嵌套
主营前端方向，技术栈是vue
11-03 1454
ul无序、ol有序和dl定义列表和列表嵌套
【React】React Router：深入理解前端路由的工作原理
鑫宝的博客
11-22 2345
深入理解 React Router 的工作原理，不仅能帮助开发者更好地使用这个库，还能提升对前端路由的整体认知。路由不仅仅是页面跳转，更是构建现代 Web 应用的重要基石。通过本文，相信读者已经对 React Router 有了更深入的理解。希望这些insights能够帮助大家在实际开发中更好地运用路由技术。
React Router--实战篇
不见浅诗的博客
06-17 391
本篇文章参考极客时间 React Router 教程 文章目录前言一、通过 URL 传参1.1如何通过 url 传递参数1.2如何获取参数1.3如何运用二、嵌套路由 前言   上一节总结了一下 React Router 的基本架构，对于路由这个东西，大家应该已经有了一个基本的概念，本篇文章，我们就实际开发当中路由的使用情况，做一下具体分析。上一节没看的同学要补补课哈。 React Router，组长的工作 一、通过 URL 传参   通过 url 传参是实际应用当中非常常见的一种情况，因为我们的 u
小白学react之React Router实战
天地会珠海分舵
09-29 1272
通过上一篇文章《[小白学react之altjs下的Action和Store](http://techgogogo.com/2016/09/altjs_action_store/)》我们学习了在alt框架下的Action和Store的特色，以及对alt-tutorial的代码做了重构，让其更简洁且各模块职责更分明。 今天的计划是继续对alt-tutorial进行改造，通过实战来学习React Router的基
React-router 最佳实践
gu2022_3_5_21_23的博客
05-23 365
v5 和 v6 都支持的 API。这种方式的优点是路由配置和应用的其它部分是紧密集成的，这使得路由配置更加直观和易于理解。函数会替换所有的查询参数，如果你只想修改某个查询参数，你需要先获取当前的查询参数，然后修改它，然后再调用。react-router-dom 获取 params 和 query。
HTML: 列表
qq_55038440的博客
10-20 886
ul、ol、嵌套列表等标签
react-router-CN：React Router V4中文文档
02-19
React Router核心组件 用于DOM绑定的React Router 用于的React路由器 React Router和Redux的集成 静态路由配置帮助助手 加群交流 React技术交流1群（已满）： React技术交流2群： 鸣谢 感谢支持React Router的...
React Router 中文文档 pdf
03-18
### React Router 中文文档知识点概览 #### 一、引言 React Router 是一个用于构建 React 应用程序中的客户端路由解决方案。它旨在确保应用程序的用户界面与 URL 保持一致，使得开发人员能够轻松地管理和导航不同的...
react-router-i18n:建立在React Router之上的国际化库
04-28
这是一个使用React Router进行I18n（国际化）的小型图书馆。 演示版 安装 yarn add react-router-i18n 请注意，此程序包具有以下对等依赖项： { " react " : " ^16.8.4 " , " react-dom " : " ^16.8.1 " , " ...
react router
04-01
React Router 是一个强大的路由库，它是 React.js 生态系统中的重要组成部分，用于管理应用程序的页面导航和状态。在React应用中，路由管理是至关重要的，因为它允许用户在不刷新整个页面的情况下，通过URL来切换...
嵌套ul li 实现简单的二级菜单
01-07
通过嵌套的ul li 实现简单的二级菜单示例代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助
html：ul 列表嵌套和定义列表
m0_74457957的博客
04-20 630
这里写对这个术语的描述1</dd><dd>这里写对这个术语的描述2这里写术语
HTML学习笔记2
m0_69916432的博客
07-14 310
3.定义列表(dl嵌套dt和dd，dl：定义列表，dt：定义列表的标题，dd：定义列表的描述/详情)1.label只包裹内容，不包裹表单控件，设置for属性和表单控件的id属性值相同。注：网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。拓展：表格结构标签，将内容划分区域，让表格结构更清晰，语义更清晰。checked：默认选中，属性名和属性值相同，简写为一个单词。name：控件名称，控件分组，同组只能选中一个（单选功能）。五、布局标签（布局网页，划分网页区域，摆放内容）
html——day2
2301_77787086的博客
07-22 1367
前端小白
CSS学习笔记六---元素显示类型
Flora_hsx的博客
07-31 606
CSS学习笔记六+二级菜单案例
HTML学习笔记
weixin_66749281的博客
07-20 756
网页是前端开发人员写的，通过浏览器才能访问阅读的页面网页是网站的”一页“。文件扩展名为.htmlHTML是用来描述网页结构的一种语言，是Web最基本构件块，它定义了Web内容的含义和结构。HTML指的是超文本标记语言(HyperTextMarkupLanguage)，“超文本”是指在单个网站内或网站之间将网页相互连接起来的链接。HTML不是一种编程语言，而是一种标记语言(markuplanguage)，由一系列标记组成。......
多个 ul / ol （无序列表/有序列表）的嵌套时的重叠问题
Miranda0922的博客
07-12 8433
本来觉得写前端页面也不是一天两天，这样的问题应该是小菜一碟，可真正在做项目调格式的时候却突然懵逼了，想了半天才想明白是什么问题（也有可能因为之前已有的 css 总文件并不是我写的，没找到问题的症结）。如果你是一个前端小白，希望你不要踩这样的坑；如果你是一个入门级选手，希望你在做企业级项目的时候会想到这一点~ 下面说正题首先我搭了一个这样的页面框架<div class="wrapper">
HTML基础：列表标签的3种形式以及嵌套列表
u013179804的博客
03-19 1965
在使用时呢，要注意其语义化。选择合适的列表类型来表达内容关系，这是非常重要的。语义化指的是使用正确的 HTML 标签来描述文档的结构和内容，这样可以让浏览器、搜索引擎和屏幕阅读器更好地理解和解释网页内容。无序列表（<ul>）：适用于表示项目之间没有特定顺序的情况，如导航菜单或项目列表。有序列表（<ol>）：适用于表示项目之间有明确顺序或排列需求的情况，如步骤列表或排行榜。定义列表（<dl>）：适用于表示术语及其定义之间的关系，如字典或说明文档。
React-Router实战：重定向Redirect
热门推荐
若水弹丸之地
03-23 7万+
当用户访问某界面时，该界面并不存在，此时用Redirect重定向，重新跳到一个我们自定义的组件里。 一、基础 1、引入使用 // 如果loggedIn 为 false, 则重定向跳转到 /home 页面 import { Route, Redirect } from 'react-router' <Route exact path="/" render={() => ( ...
React router
最新发布
02-27
<think>好的，我现在要介绍一下 React Router。首先，我需要明确用户的需求，他们可能想了解React Router的基本概念、用途以及如何在项目中使用。接下来，我应该组织内容的结构，确保信息有条理，容易理解。 首先，React Router是一个用于React应用的路由库，所以需要解释路由在单页面应用（SPA）中的作用。用户可能不太清楚SPA和传统多页面应用的区别，这里需要简单说明。然后，提到React Router的核心功能，比如管理URL和组件的映射关系，实现无刷新页面切换。 接下来，需要介绍React Router的版本。目前常用的是v6版本，所以应该重点讲解v6的API和变化。比如，从之前的Switch组件过渡到Routes组件，以及Route组件的新用法。同时，要提到常用组件如BrowserRouter、Link、Navigate等，并解释它们的作用。 然后，安装方法是一个基本点，需要给出npm或yarn的安装命令，方便用户直接使用。同时，给出一个简单的代码示例，展示如何配置路由，这样用户能更直观地理解。例如，创建一个包含主页和关于页面的路由配置。 还需要注意动态路由和嵌套路由的介绍，这些是实际开发中常用的功能。动态路由可以通过参数传递，比如/users/:id，而嵌套路由则允许在父组件内渲染子组件，适用于复杂的布局结构。 另外，编程式导航也是一个重要部分，比如使用useNavigate钩子进行页面跳转，相比之前的useHistory，v6版本有所变化，需要指出这点差异，避免用户混淆。 最后，总结React Router的优势，比如保持UI与URL同步，提升用户体验，以及它在React生态系统中的地位。可能还要提到官方文档和社区资源，供用户进一步学习。 在写作过程中，要确保使用正确的中文表达，避免技术术语使用不当。同时，按照系统要求，所有行内数学表达式用$...$格式，但在这个问题中可能用不到数学公式，所以主要关注代码块和术语的正确格式。检查是否有拼写错误或语法问题，保持回答的准确性和流畅性。 可能还需要考虑用户的实际应用场景，比如他们是否在构建一个需要多个页面的React应用，或者是否需要处理认证后的重定向等问题。因此，适当提及保护路由、重定向等高级用法会更有帮助，但作为介绍，保持基础内容的完整性更重要。 总之，结构应该是：定义React Router，核心功能，安装方法，基本用法示例，主要组件介绍，动态和嵌套路由，编程式导航，总结优势，最后推荐学习资源。确保每个部分简洁明了，逐步引导用户理解React Router的使用和重要性。</think>React Router 是用于 React 应用程序的**路由管理库**，它通过管理 URL 与组件的映射关系，帮助构建单页面应用（SPA）的多页面导航体验。以下是关键要点： --- ### 一、核心功能 1. **URL 与组件映射** 将 URL 路径（如 `/about`）与 React 组件绑定，实现无刷新页面切换。 2. **动态路由** 支持参数化路径（如 `/users/:id`），通过 `useParams()` 获取参数： ```jsx const { id } = useParams(); // 获取 /users/123 中的 id=123 ``` 3. **嵌套路由** 在父组件内定义子路由，实现复杂布局： ```jsx <Route path="/dashboard" element={<Dashboard />}> <Route path="stats" element={<Stats />} /> // 匹配 /dashboard/stats </Route> ``` --- ### 二、核心组件 1. **`<BrowserRouter>`** 包裹整个应用，提供 HTML5 History API 支持： ```jsx import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') ); ``` 2. **`<Routes> 与 <Route>`** - v6 版本用 `<Routes>` 替代旧版 `<Switch>` - `<Route>` 定义路径与组件的映射： ```jsx <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> ``` 3. **`<Link>`** 替代 `<a>` 标签实现无刷新导航： ```jsx <Link to="/about">关于我们</Link> ``` 4. **`<Navigate>`** 重定向到指定路径： ```jsx <Route path="/old" element={<Navigate to="/new" />} /> ``` --- ### 三、编程式导航 通过 `useNavigate` 钩子实现 JS 控制跳转： ```jsx import { useNavigate } from 'react-router-dom'; function Login() { const navigate = useNavigate(); return ( <button onClick={() => navigate('/dashboard')}>登录后跳转</button> ); } ``` --- ### 四、安装与版本 1. **安装** 适用于 React v16.8+： ```bash npm install react-router-dom@6 ``` 2. **版本差异** - v6 简化了 API（如用 `element` 替代 `component`） - 嵌套路由配置更直观 --- ### 五、典型应用场景 1. 根据 URL 显示不同页面组件 2. 实现带参数的详情页（如 `/product/:id`） 3. 权限控制（未登录重定向到登录页） 4. 404 页面处理： ```jsx <Route path="*" element={<NotFound />} /> ``` --- ### 六、优势 - 保持 UI 与 URL 同步 - 支持浏览器前进/后退操作 - 轻量级（gzip 后仅约 6KB） 官方文档：[reactrouter.com](https://reactrouter.com/) 建议通过实际项目练习路由配置、动态参数传递和权限验证场景。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

偶尔躲躲乌云_0

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值