ReactRouter

最新推荐文章于 2024-04-20 14:50:22 发布
最新推荐文章于 2024-04-20 14:50:22 发布
阅读量151 收藏
点赞数
分类专栏： React 文章标签： react router
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/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;
偶尔躲躲乌云_0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML-ul无序、ol有序和dl定义列表和列表嵌套
主营前端方向，技术栈是vue
11-03 1334
ul无序、ol有序和dl定义列表和列表嵌套
HTML: 列表
qq_55038440的博客
10-20 694
ul、ol、嵌套列表等标签
html：ul 列表嵌套和定义列表
最新发布
m0_74457957的博客
04-20 454
这里写对这个术语的描述1</dd><dd>这里写对这个术语的描述2这里写术语
HTML学习笔记2
m0_69916432的博客
07-14 211
3.定义列表(dl嵌套dt和dd，dl：定义列表，dt：定义列表的标题，dd：定义列表的描述/详情)1.label只包裹内容，不包裹表单控件，设置for属性和表单控件的id属性值相同。注：网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。拓展：表格结构标签，将内容划分区域，让表格结构更清晰，语义更清晰。checked：默认选中，属性名和属性值相同，简写为一个单词。name：控件名称，控件分组，同组只能选中一个（单选功能）。五、布局标签（布局网页，划分网页区域，摆放内容）
html——day2
2301_77787086的博客
07-22 1205
前端小白
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-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来切换...
React-Router-DynamicRouting:快速开始使用 React Router 和动态路由！
06-02
与 ECMAScript 6 React 展示如何在 ECMAScript 6 中使用 React。 用法 npm install npm run build （可选）从 Web 服务器运行： npm install -g live-server live-server 可以在找到相关的博客文章。 它的要点是...
React Router如何在url参数不同的情况下跳转页面不更新解决方案
01-20
在React应用中，React Router是用于管理应用内部路由的一个强大库。它允许我们在URL改变时动态地渲染不同的组件，提供了一种优雅的方式来处理用户导航。然而，在某些情况下，当URL参数变化但路径保持不变时，React ...
嵌套ul li 实现简单的二级菜单
01-07
通过嵌套的ul li 实现简单的二级菜单示例代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助
CSS学习笔记六---元素显示类型
Flora_hsx的博客
07-31 555
CSS学习笔记六+二级菜单案例
HTML学习笔记
weixin_66749281的博客
07-20 681
网页是前端开发人员写的，通过浏览器才能访问阅读的页面网页是网站的”一页“。文件扩展名为.htmlHTML是用来描述网页结构的一种语言，是Web最基本构件块，它定义了Web内容的含义和结构。HTML指的是超文本标记语言(HyperTextMarkupLanguage)，“超文本”是指在单个网站内或网站之间将网页相互连接起来的链接。HTML不是一种编程语言，而是一种标记语言(markuplanguage)，由一系列标记组成。......
多个 ul / ol （无序列表/有序列表）的嵌套时的重叠问题
Miranda0922的博客
07-12 8278
本来觉得写前端页面也不是一天两天，这样的问题应该是小菜一碟，可真正在做项目调格式的时候却突然懵逼了，想了半天才想明白是什么问题（也有可能因为之前已有的 css 总文件并不是我写的，没找到问题的症结）。如果你是一个前端小白，希望你不要踩这样的坑；如果你是一个入门级选手，希望你在做企业级项目的时候会想到这一点~ 下面说正题首先我搭了一个这样的页面框架<div class="wrapper">
HTML基础：列表标签的3种形式以及嵌套列表
u013179804的博客
03-19 1315
在使用时呢，要注意其语义化。选择合适的列表类型来表达内容关系，这是非常重要的。语义化指的是使用正确的 HTML 标签来描述文档的结构和内容，这样可以让浏览器、搜索引擎和屏幕阅读器更好地理解和解释网页内容。无序列表（<ul>）：适用于表示项目之间没有特定顺序的情况，如导航菜单或项目列表。有序列表（<ol>）：适用于表示项目之间有明确顺序或排列需求的情况，如步骤列表或排行榜。定义列表（<dl>）：适用于表示术语及其定义之间的关系，如字典或说明文档。
关于 element-ul 嵌套 弹框 解决方案：：：
weixin_45379180的博客
07-13 403
html 页面 css
div ul li 的嵌套顺序
不良牛的博客
12-22 1820
      就是&lt;div&gt;&lt;ul&gt;&lt;li&gt;的三角关系。我的经验就是&lt;div&gt;在最外面，里面 是&lt;ul&gt;，然后再是&lt;li&gt;，当然&lt;li&gt;里面又可以嵌套&lt;div&gt;什么的，但是并不建议你嵌套很多 东西。当你符合这样的规则的时候，那些倒霉的，不听话的间隙就不会在里面出现了，当你仅仅是&l
Reactrouter
08-29
React Router 是一个用于构建单页面应用程序（SPA）的 JavaScript 库。它允许您在 React 应用中管理 URL，并实现...如果您需要更多关于 React Router 的信息和使用方法，您可以查阅官方文档：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、付费专栏及课程。

余额充值