脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React 前端路由

React中前端路由的示例代码

 更新时间：2022年04月17日 12:12:17   作者：weiweicn!  
本文主要介绍了React中前端路由的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一. 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 前端路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 详解如何在React组件“外”使用父组件的Props

    详解如何在React组件“外”使用父组件的Props

    这篇文章主要介绍了详解如何在React组件“外”使用父组件的Props，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • React函数组件useContext useReducer自定义hooks

    React函数组件useContext useReducer自定义hooks

    这篇文章主要为大家介绍了React函数组件useContext useReducer自定义hooks示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • React实现组件全屏化的操作方法

    React实现组件全屏化的操作方法

    开发今天给我提了一个sql编辑器输入框比较小，不支持放大，不太方便，下面看下我的处理方法，本文基于React+antd，给大家演示一个完整的全屏demo，感兴趣的朋友一起看看吧
    2021-10-10
  • React生命周期函数深入全面介绍

    React生命周期函数深入全面介绍

    生命周期函数指在某一时刻组件会自动调用并执行的函数。React每个类组件都包含生命周期方法，以便于在运行过程中特定的阶段执行这些方法
    2022-09-09
  • React实践之Tree组件的使用方法

    React实践之Tree组件的使用方法

    本篇文章主要介绍了React实践之Tree组件的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • React Hook用法示例详解（6个常见hook）

    React Hook用法示例详解（6个常见hook）

    这篇文章主要介绍了React Hook用法详解（6个常见hook）,本文通过实例代码给大家介绍了6个常见hook，需要的朋友可以参考下
    2021-04-04
  • React通过classnames库添加类的方法

    React通过classnames库添加类的方法

    这篇文章主要介绍了React通过classnames库添加类,在vue中添加class是一件非常简单的事情，你可以通过传入一个对象, 通过布尔值决定是否添加类，本文给大家介绍的非常详细，需要的朋友可以参考下
    2022-09-09
  • React Native提供自动完成的下拉菜单的方法示例

    React Native提供自动完成的下拉菜单的方法示例

    这篇文章主要为大家介绍了React Native提供自动完成的下拉菜单的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • React状态管理器Rematch的使用详解

    React状态管理器Rematch的使用详解

    rematch是对redux的二次封装，简化了redux是使用，极大的提高了开发体验，这篇文章主要介绍了React状态管理器Rematch的使用,需要的朋友可以参考下
    2022-09-09
  • React组件里this指向了undefined原理解析

    React组件里this指向了undefined原理解析

    这篇文章主要为大家介绍了React组件里this指向了undefined原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03

最新评论