React 路由配置

最新推荐文章于 2024-03-06 16:57:50 发布
最新推荐文章于 2024-03-06 16:57:50 发布
阅读量2.9k 收藏 7
点赞数
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/We_jia/article/details/89353729
版权

目录

一、路由配置

二、路由传值

2.1 静态传值

2.2 动态传值

2.3 es6模板传值

2.4 传多个值

2.5 get 传值

 三、配置子路由

四、编程式路由

4.1 同级路由跳转

4.2 子父路由跳转

一、路由配置

  • 1.安装路由
cnpm install react-router-dom –save
  • 2.配置路由

新建一个Main文件来封装路由，创建三个组件Home.jsx,News.jsx,My.jsx,在main.jsx 文件中配置这三个组件的路由

配置路由时要先导入路由，最后要在App.js中导入Main.jsx

import {BrowserRouter as Router,Route,Link} from "react-router-dom"
import React,{Component} 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 Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <Router>
               {/* 路由入口 */}
            <Link to="/">Home</Link>
            <Link to="/news">News</Link>
            <Link to="/my">My</Link>

               {/* 配置路由 */}
            <Route path="/" component={Home}></Route>
            <Route path="/news" component={News}></Route>
            <Route path="/my" component={My}></Route>
            </Router>
        );
    }
}

export default Main;

二、路由传值

2.1 静态传值

import React,{Component} 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 Component {
    constructor(props) {
        super(props);
        this.state = {  
           
        };
    }
    render() {
        return (
            <Router>
               {/* 路由入口 */}
            <Link to="/">Home</Link>
            {/* 1.固定传值 */}
            <Link to="/news/1">News</Link> 
            <Link to="/my">My</Link>
               {/* 配置路由 */}
            <Route path="/" component={Home}></Route>
            <Route path="/news/:id" component={News}></Route>
            <Route path="/my" component={My}></Route>
            </Router>
        );
    }
}

export default Main;

2.2 动态传值

import React,{Component} 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 Component {
    constructor(props) {
        super(props);
        this.state = {  
            id:10,
           
        };
    }
    render() {
        return (
            <Router>
               {/* 路由入口 */}
            <Link to="/">Home</Link>
            {/* 2.动态传值  + 拼接    在子组件中接收值*/}
            {/* <Link to={"/news/"+this.state.id}>News</Link> */}           
            <Link to="/my">My</Link>

               {/* 配置路由 */}
            <Route path="/" component={Home}></Route>
            <Route path="/news/:id" component={News}></Route>
            <Route path="/my" component={My}></Route>
            </Router>
        );
    }
}

export default Main;

2.3 es6模板传值

import React,{Component} 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 Component {
    constructor(props) {
        super(props);
        this.state = {  
            id:10,
        };
    }
    render() {
        return (
            <Router>
               {/* 路由入口 */}
            <Link to="/">Home</Link>           
            {/* 3.es6模板传值 */}
            {/* ``不是单引号 tab上方的键 */}
            <Link to={`/news/${this.state.id}`}>News</Link> 

            <Link to="/my">My</Link>

               {/* 配置路由 */}
            <Route path="/" component={Home}></Route>
            <Route path="/news/:id" component={News}></Route>
            <Route path="/my" component={My}></Route>
            </Router>
        );
    }
}

export default Main;

2.4 传多个值

import React,{Component} 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 Component {
    constructor(props) {
        super(props);
        this.state = {  
            id:10,
            name:"jia"
        };
    }
    render() {
        return (
            <Router>
               {/* 路由入口 */}
            <Link to="/">Home</Link>
            {/* 4.传多个值 */}
           <Link to={`/news/${this.state.id}/${this.state.name}`}>News</Link>  
            <Link to="/my">My</Link>

               {/* 配置路由 */}
            <Route path="/" component={Home}></Route>
            <Route path="/news/:id/:name" component={News}></Route>
            <Route path="/my" component={My}></Route>
            </Router>
        );
    }
}

export default Main;

以上几种方法在对应的组件中接收值

渲染完成之后 接收传值   componentDidMount()生命周期

import React,{Component} from "react";
class News extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }

    //渲染完成之后 接收传值
    componentDidMount(){
        console.log(this.props.match.params)
    }
    render() {
        return (
            <div>News</div>
        );
    }
}

export default News;

2.5 get 传值

相当于在路径上加？id=1

import React,{Component} 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 Component {
    constructor(props) {
        super(props);
        this.state = { };
    }
    render() {
        return (
            <Router>
               {/* 路由入口 */}
            <Link to="/">Home</Link>
            <Link to="/news">News</Link>

            //get传值
            <Link to="/my/?id=1&name=2">My</Link>

               {/* 配置路由 */}
            <Route path="/" component={Home}></Route>
            <Route path="/news/:id/:name" component={News}></Route>
            <Route path="/my" component={My}></Route>
            </Router>
        );
    }
}

export default Main;

在My.jsx组件中接收值

对于这样的值可以自己写算法解析  也可以导入node的url模块进行解析

算法解析

import React,{Component} from "react";
class My extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    componentDidMount(){
        console.log(this.props.location.search) //?id=1&name=2
       // 对于这样的值可以自己写方法解析  也可以导入node的url模块进行解析
       let url=this.props.location.search;
       this.changeUrl(url);
    }
    changeUrl=(url)=>{
    let u=url.replace("?","");
    console.log(u)
    let ua=u.replace(/=/g,":").replace("&",",");
    console.log(ua)
    console.log(ua.split(",")[0].split(":")[1]);
    //把一个字符串分割成字符串数组:
    }
    render() {
        return (
            <div>My</div>
        );
    }
}

export default My;

导入url模块解析

安装url

cnpm install url --save
import React,{Component} from "react";

//导入url
import url from "url"

class My extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    componentDidMount(){
      console.log(this.props.location.search) //?id=1&name=2
      let localurl=this.props.location.search
      let src=url.parse(localurl,true)
      console.log(src)
    }
  
    render() {
        return (
            <div>My</div>
        );
    }
}

export default My;

 三、配置子路由

import React,{Component} from "react";
import {BrowserRouter as Router,Route,Link} from "react-router-dom";

import Child from "./Child"
class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            id:10
        };
    }
    render() {
        return (
            <div>Home
             <Router>
                <Link to={"/home/child/"+this.state.id}>child</Link>
                <Route path="/home/child/:id" component={Child}></Route>
             </Router>
            </div>
        );
    }
}

export default Home;

四、编程式路由

4.1 同级路由跳转

在News.jsx组件中写编程式路由跳转到同级路由 My.jsx

import React,{Component} from "react";
class News extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }

    //渲染完成之后 接收传值
    componentDidMount(){
        console.log(this.props.match.params)
    }

     //编程式路由  路由条状
     toMy=()=>{
            this.props.history.push("/my")
    }
    render() {
        return (          
            <div>
                News
                <button onClick={this.toMy}>跳转到同级路由</button>
            </div>
        );
    }
}

export default News;

4.2 子父路由跳转

从News.jsx组件跳到父路由组件Home.jsx，以及跳动同级路由My.jsx组件

（不能跳转到爷路由）

跳转路由时可以传参

import React,{Component} from "react";
import {BrowserRouter as Router,Route,Link} from "react-router-dom";

import Child from "./Child";
class News extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }

    //渲染完成之后 接收传值
    componentDidMount(){
        console.log(this.props.match.params)
    }

     //编程式路由  路由跳转
     toHome=()=>{
         //跳转路由是可以传值
         this.props.history.push("/",{id:1})
        // this.props.history.push("/")
     }

     toMy=()=>{
        this.props.history.push("/my")
    }
    
    render() {
        return (          
            <div>
                News
                <button onClick={this.toHome}>跳转到父级路由</button>

                <button onClick={this.toMy}>跳转到同级路由</button>

                <Router>
                <Link to={"/news/child"}>child</Link>
                <Route exact path="/news/child" component={Child}></Route>
             </Router>
            </div>
                
        );
    }
}

export default News;

 

We_jia
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React路由
02-23
Create React App入门 该项目是通过。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看。 如果进行编辑，页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 最小化构建，文件名包含哈希。 您的应用已准备好进行部署！ 有关更多信息，请参见有关的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webpack，Babel，ESL
react实现同页面三级跳转路由布局
10-16
主要为大家详细介绍了react实现同页面三级跳转路由布局，一个路由小案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
React_ 三、Router路由配置
最新发布
yang20000222的博客
03-06 555
安装后在index.js跟文件导入 创建router/index.js文件 导出组件和封装的router 使用 声明式导航Link和编程式导航useNavigate 导航传参
react路由配置方式详解
08-29
本篇文章主要介绍了react路由配置方式详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React路由鉴权的实现方法
11-30
前言 上一篇文章中有同学提到路由鉴权，由于时间关系没有写，本文将针对这一特性对 vue 和 react 做专门说明，希望同学看了以后能够受益匪浅，对你的项目能够有所帮助，本文借鉴了很多大佬的文章篇幅也是比较长的。 背景 单独项目中是希望根据登录人来看下这个人是不是有权限进入当前页面。虽然服务端做了进行接口的权限，但是每一个路由加载的时候都要去请求这个接口太浪费了。有时候是通过SESSIONID来校验登陆权限的。 在正式开始 react 路由鉴权之前我们先看一下vue的路由鉴权是如何工作的： 一、vue之beforeEach路由鉴权 一般我们会相应的把路由表角色菜单配置在后端，当用户未通过页面菜
React 之 Router - 路由详解
玄鱼殇
08-18 2998
1. 安装react-router。3. 跳转Link && 占位组件。四、Not Found页面配置。hook只能在函数式组件中使用。配置放到一个地方进行集中管理。1. 创建router文件夹。2. 在App.jsx中使用。1. index.js中配置。一、Router的基本使用。一、Router的基本使用。2. search传递参数。三、Navigate导航。路由高阶组件再进一步封装。2. router中配置。路由高阶组件进一步封装。1. 动态路由的方式。
react路由配置
Paolooo的博客
06-01 2735
react--router
React配置路由----傻瓜教程
Qing_0124的博客
04-28 7196
----整体思路就是：就是在路由文件里配置路由，再将路由文件导入App.js,最后将App.js导入src下的index.js。 1.创建React项目： create-react-app day01react 2.安装全局和路由依赖： cnpm install -g create-react-app （仅第一次创建项目前需要） cnpm install react[email protected] --save（安装6.0以下版本，因为6.0以上版本某些属性已经被迭代） 3.新建两个页面 4
React 之Router路由（含5.0与6.0版本）
qq_45799465的博客
04-19 7898
一、路由介绍 二、事前准备 2.1 安装路由模块 2.2 相关组件 三、V5版本路由使用 3.1 声明式导航 3.2 编程式导航 3.3 嵌套路由 3.4 路由传参 3.5 重定向 与 404 3.6 三种路由的渲染方式【了解】 3.7 withRouter高阶组件 3.8 自定义导航组件 四、V6版本路由使用 4.1 声明式导航 4.2 编程式导航 4.3 重定向与404 4.4 传参 4.5 嵌套路由 4.6 批量配置路由
超详细的React路由基础使用
暗武逢天的博客
05-24 2279
一个路由就是一个映射关系(key:value) key为路径, value可能是function或component
前端学习--React(4)路由
Michelle209的博客
11-26 962
路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信。
React路由最全使用(N)
weixin_68658847的博客
05-05 2012
React路由最全使用(N)
React路由配置
weixin_51929096的博客
08-15 340
{path:"url/:参数名",element:}
react学习之路1：react基础路由配置
我不喜欢打代码的博客
03-08 283
最近接手了一个react项目的任务 之前一直没学过react的我临危受命，凭借着js的功底完成了这个任务，但是既然入坑了react，那我也来从头好好学习一下react这个框架吧（毕竟大厂都爱react） 这里我记录一下我学习react的路由配置 首先先放一下我的项目目录 应该大家都能看懂吧，接下来我们安装一下相关的依赖（react-router-dom） npm install react-router-dom --save 接下来我们创建三个页面组件（app，page1，page2），参考上面的文件结
React路由配置(React-Router)
qq_52212982的博客
09-18 1982
React路由配置(React-Router)与基础使用
react 路由配置
weixin_42790916的博客
06-23 618
react router 4.0 要安装 react-router-dom 是基于pc端的路由插件 详细教程请看官网 reacttraining.cn打不开的话直接百度进入链接 以下谨记载自己所学 4.0版本中已经不需要路由配置文件 一切皆为组件 可以放在任意组件中配置 当然如果配置在文件中本人感觉还是比较清晰的 仅代表个人观点 react-router 和 react-router-dom的理...
react 路由配置
05-23
以下是一个基本的 React 路由配置示例： 1. 安装 React Router ``` npm install react-router-dom ``` 2. 引入 React Router ```js import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值