React中前端路由的示例代码

目录
  • 一. url是什么
  • 二. 使用步骤

一. url是什么

访问不同url, 展示不同的组件

二. 使用步骤

安装React路由:命令行中执行npm install react-router-dom --save(注意此处的版本为npm install react-router-dom@4.3.1 --save)

两个js文件,分别为list.js和newButton.js,要实现访问localhost:3000/button的时候就显示button.js;访问localhost:3000/list的时候就显示list.js。代码如下:

list.js

import React, {Component} from "react";

import {List} from 'antd';

const data = [
    'aaa',
    'bbb',
    'ccc',
    'ddd'
]
class List extends Component {
    render() {
        return (
            <List style={{marginLeft: 20,
            marginTop: 20,
            marginRight: 20}}
            header={<div>Header</div>}
            footer={<div>Footer</div>}
            bordered
            dataSource={data}
            renderItem={item=>(<List.Item>{item}</List.Item>)}
            />
        )
    }
}

export default List

newButton.js

import React, {Component} from "react";

import {List} from 'antd';

const data = [
    'aaa',
    'bbb',
    'ccc',
    'ddd'
]
class NewList extends Component {
    render() {
        return (
            <List style={{marginLeft: 20,
            marginTop: 20,
            marginRight: 20}}
            header={<div>Header</div>}
            footer={<div>Footer</div>}
            bordered
            dataSource={data}
            renderItem={item=>(<List.Item>{item}</List.Item>)}
            />
        )
    }
}

export default NewList

在index.js中使用router
1)引入路由:import { BrowserRouter, Route, Link } from 'react-router-dom';
2)渲染BrowserRouter组件,其中包含一条条的路由

class Entry extends Component {
    render() {
        return (
            <BrowserRouter>
            <div>
            <Route path='/list' component={NewList}/>
            <Route path='/button' component={NewButton}/>
            </div>
            </BrowserRouter>
        )
    }
}

3)浏览器中输入localhost:3000后,什么后没显示出来,因为此时没有匹配的路由

4)根据路由的配置,浏览器中输入:localhost:3000/list就会显示newList组件
输入:localhost:3000/button就会显示newButton组件

注:BrowserRoute表示定义一个路由,Route表示一个路由项,

5)如想通过点击newButton里的按钮后跳转到列表页,需要用到Link(使用React路由后,就不能使用a标签进行页面跳转,需要借助Link标签完成路由的跳转)

步骤:在newButton中引入Link后用Link标签跳转

newButton.js

import React, {Component, Fragment} from "react";
import { Link } from "react-router-dom";

import {Button} from 'antd';

class NewButton extends Component {
    render() {
        return (
            <Link to='/list'>
                <Button type="primary">按钮</Button>
            </Link>

        )
    }
}

export default NewButton;

6)跳转页面的过程中,携带参数,如何获取参数,如

class NewButton extends Component {
    render() {
        return (
            <Link to='/list/123'>
                <Button type="primary">按钮</Button>
            </Link>

        )
    }
}

解决方式:在index.js配置路由部分,给list地址后加一个变量,表示传过来的值为变量id的值

<Route path='/list/:id' component={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->NewList}/>

之后在newList组件中打印出console.log(this.props)

可看到params里有变量id的值为123

完整代码如下:
index.js中

import React, {Component}from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import 'antd/dist/antd.css';
import NewList from './newList'
import NewButton from './newButton'

class Entry extends Component {
    render() {
        return (
            <BrowserRouter>
            <div>
            <Route path='/list/:id' component={NewList}/>
            <Route path='/button' component={NewButton}/>
            </div>
            </BrowserRouter>
        )
    }
}

// 将内容挂载到页面上
ReactDOM.render(<Entry />, document.getElementById('root'));

newList.js中

import React, {Component} from "react";

import {List} from 'antd';

const data = [
    'aaa',
    'bbb',
    'ccc',
    'ddd'
]
class NewList extends Component {
    render() {
        console.log(this.props)
        return (
            <List style={{marginLeft: 20,
            marginTop: 20,
            marginRight: 20}}
            header={<div>Header</div>}
            footer={<div>Footer</div>}
            bordered
            dataSource={data}
            renderItem={item=>(<List.Item>{item}</List.Item>)}
            />
        )
    }
}

export default NewList

newButton.js中

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

import {Button} from 'antd';

class NewButton extends Component {
    render() {
        return (
            <Link to='/list/123'>
                <Button type="primary">按钮</Button>
            </Link>

        )
    }
}

export default NewButton;

到此这篇关于React中前端路由的示例代码的文章就介绍到这了,更多相关React 前端路由内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 使用React-Router实现前端路由鉴权的示例代码

    React-Router 是React生态里面很重要的一环,现在React的单页应用的路由基本都是前端自己管理的,而不像以前是后端路由,React管理路由的库常用的就是就是 React-Router .本文想写一下 React-Router 的使用,但是光介绍API又太平淡了, 而且官方文档已经写得很好了 ,我这里就用一个常见的开发场景来看看 React-Router 是怎么用的吧.而我们一般的系统都会有用户访问权限的限制,某些页面可能需要用户具有一定的权限才能访问.本文就是用 React-Ro

  • 详解前端路由实现与react-router使用姿势

    路由 对于有过SPA开发经验的人来说,路由这个名词并不陌生,前端的路由和后端的路由在实现技术上不一样,但是原理都是一样的.在 HTML5 的 history API 出现之前,前端的路由都是通过 hash 来实现的,hash 能兼容低版本的浏览器.它的 URI 规则中需要带上 #.Web 服务并不会解析 hash,也就是说 # 后的内容 Web 服务都会自动忽略,但是 JavaScript 是可以通过 window.location.hash 读取到的,读取到路径加以解析之后就可以响应不同路径的

  • React中前端路由的示例代码

    目录 一. url是什么 二. 使用步骤 一. url是什么 访问不同url, 展示不同的组件 二. 使用步骤 安装React路由:命令行中执行npm install react-router-dom --save(注意此处的版本为npm install react-router-dom@4.3.1 --save) 两个js文件,分别为list.js和newButton.js,要实现访问localhost:3000/button的时候就显示button.js:访问localhost:3000/l

  • 在react中使用vuex的示例代码

    前言 笔者最近在学习使用react,提到react就绕不过去redux.redux是一个状态管理架构,被广泛用于react项目中,但是redux并不是专为react而生,两者还需要react-redux建立一座桥梁.同时,redux架构规定只能发送同步action,要想发送异步action就需要结合中间件如redux-thunk.redux-saga等,所以说要想搞定redux还真是不容易啊,光名词就这么多.笔者以前也接触过一点vuex,vuex对笔者这样的菜鸡相对友好,但是vuex是和vue配

  • React+EggJs实现断点续传的示例代码

    技术栈 前端用了React,后端则是EggJs,都用了TypeScript编写. 断点续传实现原理 断点续传就是在上传一个文件的时候可以暂停掉上传中的文件,然后恢复上传时不需要重新上传整个文件. 该功能实现流程是先把上传的文件进行切割,然后把切割之后的文件块发送到服务端,发送完毕之后通知服务端组合文件块. 其中暂停上传功能就是前端取消掉文件块的上传请求,恢复上传则是把未上传的文件块重新上传.需要前后端配合完成. 前端实现 前端主要分为:切割文件.获取文件MD5值.上传切割后的文件块.合并文件.暂

  • 简单谈谈React中的路由系统

    React中的路由系统 提起路由,首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则,程序运行时就能自动根据我们输入的URL来返回相对应的页面.前端中的路由与之类似,前端中的路由是根据你定义的路由规则来渲染不同的页面/组件,同时也会更新地址栏的URL.本篇文章要介绍的是React中经常使用到的路由,react-router主要使用HTML5的history API来同步你的UI和URL. react-router的最新版本是v4.1.1,由于4.0版本和之间的版本A

  • 详解SPA中前端路由基本原理与实现方式

    在讲前端路由之前,先说下后端路由,以及为什么出现了前端路由. 后端路由: 浏览器在地址栏中切换不同的url时,每次都向后台服务器发出请求,服务器响应请求,在后台拼接html文件传给前端显示,java web中的jsp就是如此实现的.常用的后台MVC模式的基本路由处理流程:浏览器输入一个url请求,从中找到Controller和Action的值,将请求传递给Controller处理,Controller获取Model数据对象,并且将Model传递给View,最后View呈现界面. 例如输入一个ur

  • 利用React实现虚拟列表的示例代码

    目录 列表项高度固定 代码实现 列表项高度动态 代码实现 思路说明 一些需要注意的问题 结尾 大家好,我是前端西瓜哥.这次我们来看看虚拟列表是什么玩意,并用 React 来实现两种虚拟列表组件. 虚拟列表,其实就是将一个原本需要全部列表项的渲染的长列表,改为只渲染可视区域内的列表项,但滚动效果还是要和渲染所有列表项的长列表一样. 虚拟列表解决的长列表渲染大量节点导致的性能问题: 一次性渲染大量节点,会占用大量 GPU 资源,导致卡顿: 即使渲染好了,大量的节点也持续占用内存.列表项下的节点越多,

  • SpringBoot中实现数据字典的示例代码

    我们在日常的项目开发中,对于数据字典肯定不模糊,它帮助了我们更加方便快捷地进行开发,下面一起来看看在 SpringBoot 中如何实现数据字典功能的 一.简介 1.定义 数据字典是指对数据的数据项.数据结构.数据流.数据存储.处理逻辑等进行定义和描述,其目的是对数据流程图中的各个元素做出详细的说明,使用数据字典为简单的建模项目.简而言之,数据字典是描述数据的信息集合,是对系统中使用的所有数据元素的定义的集合. 数据字典(Data dictionary)是一种用户可以访问的记录数据库和应用程序元数

  • 如何在ASP.NET Core中使用Session的示例代码

    ASP.NET Core 是一个跨平台,开源的,轻量级,高性能 并且 高度模块化的web框架,Session 可以实现用户信息存储从而可以在同一个客户端的多次请求之间实现用户追踪,在 ASP.Net Core 中可以使用 Microsoft.AspNetCore.Session 中间件来启用 Session 机制. 中间件的价值在于可以在 request -> response 的过程中做一些定制化的操作,比如说:监视数据,切换路由,修改流转过程中的消息体,通常来说:中间件是以链式的方式灌入到

  • 30行代码实现React双向绑定hook的示例代码

    目录 使用Proxy代理数据 使用useRef创建同一份数据引用 添加更新handler 去除多次Proxy 添加缓存完善代码 总结 Sandbox 示例 Vue和MobX中的数据可响应给我们留下了深刻的印象,在React函数组件中我们也可以依赖hooks来实现一个简易好用的useReactive. 看一下我们的目标 const CountDemo = () => { const reactive = useReactive({ count: 0, }); return ( <div onCl

  • React中classnames库使用示例

    目录 classnames的引入 引入 使用 Node.js, Browserify, or webpack: classnames函数的使用 数组的形式 ES6中使用动态类名 结合React一起使用 总结: classnames的引入 从名字上可以看出,这个库是和类名有关的.官方的介绍就是一个简单的支持动态多类名的工具库. 支持使用 npm, Bower, or Yarn 使用 npm安装 npm install classnames 使用 Bower安装 bower install clas

随机推荐