admin管理员组

文章数量:1634000

react通过路由实现页面跳转：

​ 函数式路由(withRouter)使用原生js方法实现路由功能。

​ eg：export default withRouter(Home) Home是组件名称。

	示例：
    class Home extends Component{
 		<button onClick={this.goForward}>下一级</button>
        goForward = () => {
            this.props.history.goForward()  //函数式路由
            {/* 
                this.props.history.go(0)   //正数表示调用几次goForward，负数表示调用几次goBack()，0表示刷新当前页面；
                this.props.history.goBack()  //返回上一级
                this.props.history.push('/home') //到哪去
                this.props.history.replace()  //替换当前路径 历史记录不再会有替换之前的路径
            */}
        }
    }
	
	export default withRouter(Home)

一、准备工作：

​ 1、创建myProject05-router目录

​ 2、创建清单文件， npm init -y

​ 3、安装第三方依赖包，npm install react react-dom react-scripts react-router-dom@5 --save

​ 4、创建public文件夹，在该文件夹下创建index.html

​ 5、创建src文件夹，在该文件夹下创建：

​ （1）入口文件index.js

​ （2）组件App.js和App.css文件

​ （3）创建pages文件夹，在该文件夹下创建Home文件夹，在Home文件夹下创建Cates文件夹（Cates.jsx）和Goods文件夹(Goods.jsx、Goods.css），Home.jsx，Home.css；并在该文件夹下创建About.jsx和Resovle.jsx。

​ 9、src目录：

二、编写代码：

​ 1、index.html：

    <div id="root"></div>

​ 2、index.js：

import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))

root.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>
)

​ 3、App.js：

import React, { Component } from 'react'
imp

本文标签： 跳转路由React

版权声明：本文标题：react实现路由跳转 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1729175710a1188686.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。