react实现路由跳转(react路由exact)

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

推荐整理分享react实现路由跳转(react路由exact)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:react路由跳转导致重新渲染,react路由跳转导致重新渲染,react router 路由跳转,reactjs路由跳转,react 路由跳转,react路由跳转刷新页面,react的路由,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'import {NavLink, Redirect, Route, Switch} from 'react-router-dom'import About from './pages/About'import Home from './pages/Home/Home'import Resovle from './pages/Resovle'import './App.css'export default class App extends Component { render() { return ( <div className='app'> {/* 制作导航菜单 */} <div className='tabs'> <NavLink to='/home'>首页</NavLink> <NavLink to='/resovle'>解决方案</NavLink> <NavLink to='/about'>关于我们</NavLink> </div> {/* 注册路由（其实就是路径和组件的映射关系） */} {/* 精准匹配 */} <Switch> <Route path='/home' component={Home}/> <Route path='/resovle' component={Resovle}/> <Route path='/about' component={About}/> <Redirect to='/home'/> </Switch> </div> ) }}

​ 4、App.css：

.app { width: 400px; margin: 10px auto;}.tabs { display: flex; flex-direction: rows;}.tabs a{ flex: auto; padding: 10px 30px ; background-color: #777; color: white; margin-right: 1px; text-decoration: none;}

​ 5、Home.jsx

import React, { Component } from 'react'import { NavLink, Redirect, Route, Switch } from 'react-router-dom'import Cates from './Cates/Cates'import Goods from './Goods/Goods'import './Home.css'export default class Home extends Component { render() { return ( <div className='home'> <div className='left'> <NavLink to='/home/cates'>分类</NavLink> <NavLink to='/home/goods'>商品</NavLink> </div> <div className='right'> <Switch> <Route path='/home/cates' component={Cates}/> <Route path='/home/goods' component={Goods}/> <Redirect to='/home/goods'/> </Switch> </div> </div> ) }}

​ 6、Home.css：

.home { margin-top: 10px; display: flex; flex-direction: rows; height: 200px;}.home .left { display: flex; width: 120px; flex-direction: column; background-color: skyblue; margin-right: 1px;}.home .left a { text-decoration: none; color: #333; padding: 10px 0; text-align: center;}.home .left .active { background-color: orange;}.home .right { flex: auto; background-color: greenyellow;}

​ 7、Cates.jsx：

import React, { Component } from 'react'export default class Cates extends Component { goForward = () => { this.props.history.goForward() } render() { return ( <div> <button onClick={this.goForward}>下一级</button> </div> ) }}

​ 8、Goods.jsx：

import React, { Component } from 'react'import './Goods.css'export default class Goods extends Component { push = () => { console.log(this.props); // this.props.history.push('/about') // this.props.history.replace('/about') //替换当前路径记录 少一条记录 } goBack = () => { this.props.history.goBack() } render() { return ( <div className='goods'> <button onClick={this.push}>跳转到about</button> <button onClick={this.goBack}>上一级</button> </div> ) }}

​ 9、Goods.css：

.goods .list{ display: flex; justify-content: space-around; background-color: plum;}.goods .list a { text-decoration: none; color: #333; margin: 10px;}

​ 10、About.jsx：

import React, { Component } from 'react'export default class About extends Component { render() { return ( <div>这是关于我们内容</div> ) }}

​ 11、Resolve.jsx：

import React, { Component } from 'react'export default class Resovle extends Component { render() { return ( <div>这是解决方案内容</div> ) }}三、运行命令：

​ npm react-scripts start

​ 也可以在清单文件中设置简写命令：“start”: “react-scripts start”

"scripts": { "start": "react-scripts start", "test": "echo \"Error: no test specified\" && exit 1" },

) { return (

这是解决方案内容

) } }

## `三、运行命令：`​[npm react-scripts start]()​也可以在清单文件中设置简写命令：["start": "react-scripts start"]()```json "scripts": { "start": "react-scripts start", "test": "echo \"Error: no test specified\" && exit 1" },