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

最新推荐文章于 2024-04-17 18:18:21 发布
最新推荐文章于 2024-04-17 18:18:21 发布
阅读量1.1k 收藏 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
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-router4.2使用js控制路由跳转的3种方式
02-12
react技术是目前流行UI开发框架，是facebook的开源的开发技术
React路由鉴权的实现方法
10-16
主要介绍了React路由鉴权的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
react编程式路由
weixin_50736511的博客
09-21 654
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 项目路由配置（react-router-dom 版本 v6.3、v6.4）
最新发布
weixin_42289080的博客
04-17 679
react的路由配置方式，根据 react-router-dom 的不同版本，做不同配置
十、【React-Router5】编程式路由导航
天行健，君子以自强不息
11-29 406
十、【React-Router5】编程式路由导航
react 路由配置
晴天有何特别
06-08 4281
这是一套react路由配置使用的方案展示，若有不详细明确的地方/或者缺陷可以留言提醒,此方案有路由权限，组件内部权限，菜单导航权限，懒加载，拦截等多种配置化灵活使用
react编程式路由_功能性React式编程和JavaScript
danpu0978的博客
05-15 171
react编程式路由 函数式React式编程（FRP）是一种新兴的编程范例，最近在网络世界中变得越来越流行。 这种受欢迎程度不仅与视频流媒体巨头Netflix在博客中写道如何应用FRP来优化其API有关 ，还因为它实际上提供了一种优雅的方式来降低处理时变事件和异步操作的复杂性。 一个例子 让我们看一个示例，看看FRP如何解决您以前可能必须用JavaScript处理的问题-当对服务器的异步请...
react路由配置方式详解
08-29
本篇文章主要介绍了react路由配置方式详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Nginx配置React项目Url后直接输入路由路径时报404问题的解决
09-30
主要给大家介绍了关于Nginx配置React项目Url后面直接输入路由路径时报404问题的解决方法，文中通过示例代码将解决的方法介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
React.js学习（十一）、编程式路由导航&withRouter
黄孝果的博客
02-26 740
一、编程式路由导航 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 601
编程式路由基础知识
React-Route路由的基本使用、编程式导航路由跳转、嵌套路由和集中式路由配置
qq_37967853的博客
11-18 1117
React-Route有关路由的所有知识
react 编程式路由_什么是React式编程？ iOS版
cullen2012的博客
09-10 184
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基本使用、嵌套路由、编程式导航、路由传参、懒加载
weixin_42044763的博客
03-08 1492
或HashRouter其中使用history模式;HashRouter使用hash。
react 编程式导航
xiaocuizao的博客
08-21 2749
路由跳转，replace / push 区别 push: a-b-c 可以回到上一级 this.props.history.push('路由地址') replace: a-b-c 回不到上一级 适用于登录后，不需要重新回到登页面 this.props.history.replace('路由地址') 他们的跳转效果是一样的。但是当点击浏览器的后退按钮时，由于replace没有历史记录，不能直...
react 编程式路由导航
置酒天晴的博客
07-16 335
每天进步一点点
react 编程式路由_提升功能React式编程2 7
weixin_26736149的博客
08-11 221
react 编程式路由 救援的功能编程？ (Functional Programming to the Rescue?) After establishing my base camp, in the previous part of the series, I need to choose my route to the summit, the one to depart from reacti...
React编程式路由导航
weixin_44428467的博客
04-22 272
借助路由组件的this.props.history 对象上的API对路由进行跳转、前进和后退。 路由组件：接收到三个固定的属性 history: go: ƒ go(n) goBack: ƒ goBack() 后退 goForward: ƒ goForward() 前进 push: ƒ push(path, state) 压栈， replace: ƒ replace(path, state) 替换栈顶元素
react编程式路由_React式编程主题简介
08-07 123
react编程式路由A Subject is a “special” type of observable that allows us to broadcast values to multiple subscribers. The cool thing about Subjects, is that it provides a real-time response. 主题是可观察的“特殊”类型...
react 路由配置
05-23
React 路由可以通过 React Router 库来实现。以下是一个基本的 React 路由配置示例： 1. 安装 React Router ``` npm install react-router-dom ``` 2. 引入 React Router ```js import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; ``` 3. 在 Router 中定义路由 ```js function App() { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> <Route path="*" component={NotFound} /> </Switch> </Router> ); } ``` 其中，`exact` 表示精确匹配路径，`path` 表示路由路径，`component` 表示对应的组件。`Switch` 表示只匹配其中一个路由，如果没有匹配到任何一个路由，则会跳转到 `NotFound` 组件。 4. 在组件中使用路由 在组件中可以使用 `Link` 组件来进行路由跳转： ```js import { Link } from 'react-router-dom'; function Home() { return ( <div> <h1>Home</h1> <ul> <li><Link to="/about">About</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> </div> ); } ``` 以上就是一个简单的 React 路由配置示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值