脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 前端路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 关于useEffect的第二个参数解读

    关于useEffect的第二个参数解读

    这篇文章主要介绍了关于useEffect的第二个参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • 基于React.js实现原生js拖拽效果引发的思考

    基于React.js实现原生js拖拽效果引发的思考

    这篇文章主要为大家详细介绍了基于React.js实现原生js拖拽效果，继而引发的一系列思考，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • React事件处理超详细介绍

    React事件处理超详细介绍

    这篇文章主要介绍了React事件处理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-09-09
  • react-native-fs实现文件下载、文本存储的示例代码

    react-native-fs实现文件下载、文本存储的示例代码

    本篇文章主要介绍了react-native-fs实现文件下载、文本存储的示例代码，具有一定的参考价值，有兴趣的可以了解下
    2017-09-09
  • React18使用Echarts和MUI实现一个交互性的温度计

    React18使用Echarts和MUI实现一个交互性的温度计

    这篇文章我们将结合使用React 18、Echarts和MUI（Material-UI）库,展示如何实现一个交互性的温度计,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • 利用React实现虚拟列表的示例代码

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

    虚拟列表，其实就是将一个原本需要全部列表项的渲染的长列表，改为只渲染可视区域内的列表项，但滚动效果还是要和渲染所有列表项的长列表一样。本文就将利用React实现虚拟列表，需要的可以参考一下
    2022-08-08
  • 浅谈React 中的浅比较是如何工作的

    浅谈React 中的浅比较是如何工作的

    React 中浅比较的概念无处不在，它在不同的流程中起着关键的作用，本文主要介绍了React 中的浅比较是如何工作的，具有一定的参考价值，感兴趣的可以了解一下
    2022-04-04
  • React事件处理的机制及原理

    React事件处理的机制及原理

    这篇文章主要介绍了React事件处理的机制及原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 用React实现一个简单的虚拟列表

    用React实现一个简单的虚拟列表

    虚拟列表是现在比较常用的前端渲染大数据列表的方案,目前也有很多组件库和工具库也都有对应的实现,本文将给大家介绍一下如何用React实现一个简单的虚拟列表,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
    2023-12-12
  • React-router v6在Class组件和非组件代码中的正确使用

    React-router v6在Class组件和非组件代码中的正确使用

    这篇文章主要介绍了React-router v6在Class组件和非组件代码中的正确使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论