React 路由基本配置、传值、编程式路由

最新推荐文章于 2024-09-08 23:30:29 发布
最新推荐文章于 2024-09-08 23:30:29 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： react 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43675447/article/details/104002497
版权

在github官网上搜索react-router：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
一、路由配置

  1. 安装路由：cnpm install react-router-dom --save

  2. 引入import { BrowserRouter as Router, Route, Link } from "react-router-dom"

  3. 在组件根节点外面包裹一层<Router></Router>标签

  4. 根据路径跳转 <Route path="/news" component={News} /> 其中path是路径 ，component对应着组件（此时输入对应路径即可跳转到对应页面）

  5. <Link to="/new">News</Link> 用Link标签模拟一个人a标签,点击跳转

  • 路由安装完毕之后，配置文件：
import React from 'react';

//导入路由
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';

//导入路由子组件
import Home from './Home';
import News from './News';
import My from './My';

class Main extends React.Component{
    render(){
        return (
            <div>
                <Router>
                    {/* 路由的入口  属性：to*/}
                    <ul>
                        <li>
                            <Link to="/">Home</Link>
                        </li>
                        <li>
                            <Link to="/news">News</Link>
                        </li>
                        <li>
                            <Link to="/my">My</Link>
                        </li>
                    </ul>
                    <hr/>
                    {/* 配置路由  
                        属性：path component 
                        exact为Route的属性，为bool类型（true为严格匹配 false为普通匹配）
                    */}
                    <Route exact path="/" component={Home}></Route>
                    <Route path="/news" component={News}></Route>
                    <Route path="/my" component={My}></Route>
                </Router>
            </div>
        )
    }
}

export default Main;

二、传值

  1. 动态路由传值

（1）传单个值

Main.js：

import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import News from './News';

class Main extends React.Component{
    constructor(props){
        super(props);
        this.state={
            id:66
        }
    }
    render(){
        return (
            <div>
                <Router>
					{/* 1. 固定传值 */}
                    <Link to="/news/1">News</Link>  
                    {/* 2. 拼接传值 */}
                    <Link to={'/news/'+this.state.id}>News</Link>  
                    {/* 3. ES6模板传值 */}
                    <Link to={`/news/${this.state.id}`}>News</Link>
                    <hr/>
                    <Route path="/news/:uid" component={News}></Route>
                </Router>
            </div>
        )
    }
}

export default Main;

News.js中取值：

import React from 'react';

class News extends React.Component {
    componentDidMount(){
        console.log(this.props.match.params.uid);
    }
    render() {
        return (
            <div>News</div>
        );
    }
}

export default News;

（2）传多个值

import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import News from './News';

class Main extends React.Component{
    constructor(props){
        super(props);
        this.state={
            id:66,
            name:"易安"
        }
    }
    render(){
        return (
            <div>
                <Router>
                	<Link to={`/news/${this.state.id}/${this.state.name}`}>News</Link>
                    <hr/>
                    <Route path="/news/:uid/:uname" component={News}></Route>
                </Router>
            </div>
        )
    }
}

export default Main;
  1. get 传值（相当于在路径上加 ？id=1）
  • 路由的get传值，值在location的search，可以写算法进行解析，也可安装node的url模块进行解析。

Main.js：

import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import My from './My';

class Main extends React.Component{
    render(){
        return (
            <div>
                <Router>
                	<Link to="/my?id=6&name=ikun">My</Link>
                    <Route path="/my" component={My}></Route>
                </Router>
            </div>
        )
    }
}

export default Main;

（1）算法解析

My.js：

import React from 'react';

class My extends React.Component {
    componentDidMount(){
        let locurl=this.props.location.search;
        this.changeUrl(locurl);
    }
    changeUrl=(locurl)=>{
        let u=locurl.replace("?","");
        let ur=u.replace(/=/g,":").replace("&",",");
        console.log(ur.split(",")[0].split(":")[1]);
    }
    render() {
        return (
            <div>My</div>
        );
    }
}

export default My;

（2）url模块解析

import React from 'react';
import url from 'url';

class My extends React.Component {
    componentDidMount(){
        let locurl=this.props.location.search;
        let data=url.parse(locurl,true).query;
        console.log(data);
    }
    render() {
        return (
            <div>My</div>
        );
    }
}

export default My;
  1. 数组中的数据进行传值

动态路由传值+get传值：

import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import dyValue from './dyValue';
import getValue from './getValue';

class Main extends React.Component{
    constructor(props){
        super(props);
        this.state={
            arr:[
                {
                    aid:1,
                    title:"Vue"
                },
                {
                    aid:2,
                    title:"React"
                },
                {
                    aid:3,
                    title:"Node"
                }
            ]
        }
    }
    render(){
        return (
            <div>
                <Router>
                    <h3>动态路由传值</h3>
                    {
                        this.state.arr.map((value,index)=>{
                            return (
                                <li key={index}>
                                    <Link to={`/dyvalue/${value.aid}`}>{value.title}</Link>
                                </li>
                            )
                        })
                    }
                    <Route path="/dyvalue/:aid" component={dyValue}></Route>
                    <h3>get方式传值</h3>
                    {
                        this.state.arr.map((value,index)=>{
                            return (
                                <li key={index}>
                                    <Link to={`/getvalue?aid=${value.aid}`}>{value.title}</Link>
                                </li>
                            )
                        })
                    }
                    <Route path="/getvalue" component={getValue}></Route>
                </Router>
            </div>
        )
    }
}

export default Main;

在对应跳转页面参数值：

componentDidMount() {
	console.log(this.props.match.params.aid);   //动态路由取值
    console.log(this.props.location.search);  //get取值，取出来的是?aid=1这种格式，需手动转或引入url模块，进行路由解析
}

四、路由嵌套+编程式路由+传值

  • 路由的跳转：任何需要跳转的地方使用this.props.history.push('/path')就可以进行跳转
  • 参数的获取：使用this.props.match.params.xxx可以获取到当前路由的参数

News.js（父路由）：

import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import child1 from './child1';
import child2 from './child2';

class News extends React.Component {
    //News向Home路由传值
    toLocation=()=>{
    	//跳转时可以带参，跳转的页面获取值时可用this.props.location.state
        this.props.history.push("/",{id:99});
    }
    render() {
        return (
            <div>
                News
                <hr/>
                <button onClick={this.toLocation}>跳转</button>
                <Router>
                    <ul>
                        <li>
                            <Link to="/News/child1/86">child1</Link>
                        </li>
                        <li>
                            <Link to="/News/child2">child2</Link>
                        </li>
                    </ul>
                    <Route exact path="/News/child1/:id" component={child1}></Route>
                    <Route path="/News/child2" component={child2}></Route>
                </Router>
            </div>
        );
    }
}

export default News;

Home.js（News.js的同级路由）：

import React from 'react';

class Home extends React.Component {
	//接收从News路由传递的id值
    componentDidMount(){
        console.log(this.props.location.state);
    }
    render() {
        return (
            <div>Home</div>
        );
    }
}

export default Home;

child1.js（子路由）：

import React from 'react';

class child1 extends React.Component {
    toFather=()=>{
        this.props.history.push("/");
    }
    render() {
        return (
            <div>子路由1
                <button onClick={this.toFather}>子路由1跳转</button>
            </div>
        );
    }
}

export default child1;

child2.js（子路由）：

import React from 'react';

class child2 extends React.Component {
	//子路由2跳转到子路由1
    toLocation=()=>{
        this.props.history.push("/News/child1/86");
    }
    render() {
        return (
            <div>子路由2
                <button onClick={this.toLocation}>子路由2跳转</button>
            </div>
        );
    }
}

export default child2;
易安sparkle
关注
专栏目录
React路由跳转及路由传参的几种方式
A20201130的博客
07-12 5113
原理：hash路由的原理是监听hashchange事件 安装包 npm i react-router-dom@5.3.0 代码部分 Link 和 NavLink区别：NavLink指向的路径会自带一css类名swith：用Switch组件包裹多个组件。在组件下，不管有多少个Route的路由规则匹配成功，都只会渲染第一个匹配的组件404： 不设置path属性，将404页对应的路由放在switch内部的最后位置 三、编程式路由跳转 传递参数组件里方法： let goNews = ()=>{
react路由组件传参三种方式使用
qq_60976312的博客
07-01 699
react路由组件传参三种方式使用
react-router4.2使用js控制路由跳转的3种方式
02-12
react技术是目前流行UI开发框架，是facebook的开源的开发技术
react编程式路由
weixin_50736511的博客
09-21 691
import React, { Component } from 'react' import { Route, Redirect, Link } from 'react-router-dom' import Detail from './Detail/index' export default class index extends Component { state = { a: [ { id: '01', title: "今天" },
react路由传参(3种方式)
最新发布
xiaokanfuchen86的博客
09-08 393
react
十、【React-Router5】编程式路由导航
天行健，君子以自强不息
11-29 484
十、【React-Router5】编程式路由导航
react 路由配置
晴天有何特别
06-08 4361
这是一套react路由配置使用的方案展示，若有不详细明确的地方/或者缺陷可以留言提醒,此方案有路由权限，组件内部权限，菜单导航权限，懒加载，拦截等多种配置化灵活使用
react编程式路由_功能性React式编程和JavaScript
danpu0978的博客
05-15 188
react编程式路由 函数式React式编程（FRP）是一种新兴的编程范例，最近在网络世界中变得越来越流行。 这种受欢迎程度不仅与视频流媒体巨头Netflix在博客中写道如何应用FRP来优化其API有关 ，还因为它实际上提供了一种优雅的方式来降低处理时变事件和异步操作的复杂性。 一个例子 让我们看一个示例，看看FRP如何解决您以前可能必须用JavaScript处理的问题-当对服务器的异步请...
react路由完整版详解
l529936997的博客
08-12 1000
react中的路由有三种实现方式 前端主要是通过react-router-dom实现 在index文件中引入一个 BrowserRouter或者HashRouter 将APP根组件包裹起来 这是两种模式 相当于vue中的hash和history模式 一个带#号一个不带 在主页面中引入<Route>//路由标签 用于在展示区进行路径的匹配 component={路由组件名} 例如 <Route path='/Home' component={Home}></Route&g
20 React react-router4.x中实现路由模块化、以及嵌套路由父子组件传值
03-01
在React应用中，路由管理是构建大型单页应用的关键部分。`react-router`是一个流行的库，用于处理React应用中的导航和路由。在这个教程中，我们将深入探讨如何在`react-router v4.x`中实现路由模块化，以及如何通过...
2021-05-31 react 路由跳转传参 学习总结
qq_44999678的博客
05-31 699
react 路由跳转传参 路由传参学习总结 对于react路由传参，有以下几种方式： 问号传参(search传参)： 问号传参属于明文传参。并且当刷新页面的时候参数不会消失。 <Link to={{ pathname:'/custom/info', search:'?id=' + value.id //基于问号传参 }}> 编号：{value.id}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 姓名:{value.name}
React.js学习（十一）、编程式路由导航&withRouter
黄孝果的博客
02-26 785
一、编程式路由导航 push导航 pushShow = (id,title)=>{ //push跳转+携带params参数 this.props.history.push(`/home/message/detail/${id}/${title}`) //push跳转+携带search参数 this.props.history.push(`/home/message/detail?id=${id}&title=${title}`) //push跳转+携带st
react编程式路由的基本知识
m0_61464384的博客
07-04 656
编程式路由基础知识
React-Route路由的基本使用、编程式导航路由跳转、嵌套路由和集中式路由配置
qq_37967853的博客
11-18 1189
React-Route有关路由的所有知识
react 编程式路由_什么是React式编程？ iOS版
cullen2012的博客
09-10 262
react 编程式路由There are many articles about Reactive Programming and different implementations on the internet. However, most of them are about practical usage, and only a few concern what Reactive Progr...
React Router 6 中的 6 种路由配置方式：数组、代码分割、对象、函数和服务器加载
笔记、经验、日常分享
04-21 3142
React Router 6 是一个强大的路由库，提供了多种配置路由的方式，可以满足不同的应用场景和需求。如可以使用 createBrowserRouter 或 createHashRouter 函数，以数组形式定义嵌套路由、使用 useRoutes hook 和 React.createElement，可以在函数组件中动态创建路由配置对象，实现高度灵活和可编程的路由配置。实现类似VueRouter路由的配置方式。
React（七）：Router基本使用、嵌套路由、编程式导航、路由传参、懒加载
weixin_42044763的博客
03-08 2165
或HashRouter其中使用history模式;HashRouter使用hash。
react 编程式导航
xiaocuizao的博客
08-21 2770
路由跳转，replace / push 区别 push: a-b-c 可以回到上一级 this.props.history.push('路由地址') replace: a-b-c 回不到上一级 适用于登录后，不需要重新回到登页面 this.props.history.replace('路由地址') 他们的跳转效果是一样的。但是当点击浏览器的后退按钮时，由于replace没有历史记录，不能直...
react 编程式路由导航
置酒天晴的博客
07-16 391
每天进步一点点
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值