React封装路由点跳方法

小鱼儿 2023-03-06 03:21 41阅读 0赞

router.js:

import React from 'react';
    
    import { BrowserRouter,Route,Redirect,Switch} from 'react-router-dom';
    import Home from './Home'
    import List from './List'
    import News from './News'
    
    const RouterLink = ()=>(
    
    	<BrowserRouter>
      		<Switch>
      			<Route path='/' exact component={ Home}></Route>
      			<Route path='/list' exact component={ List}></Route>
      			<Route path='/news' exact component={ News}></Route>
      			<Redirect to='/' />
      		</Switch>
      	</BrowserRouter>
    
    )
    export default RouterLink;

Home.js:

import React,{ Component} from 'react'
    
    import { Link} from 'react-router-dom'
    
    class Home extends Component{ 
    
    	render () { 
    		return (
    			<div>
    			
    		   		<Link to='/'>首页</Link>
    
    		   		<Link to='/list'>列表</Link>
    
    		   		<Link to='/news'>新闻</Link>
    		  		
    		  		<button onClick={ this.toNews.bind(this)}>新闻</button>
    
    			</div>
    		)
    	}
    	toNews(){ 
    		this.props.history.push('/news');
    	}
    }
    export default Home;

News.js:

import React,{ Component} from 'react'
    
    class News extends Component{ 
    
    	render () { 
    		return (
    			<div>
    				我是News组件
    				<button onClick={ this.toGoBack.bind(this)}>返回上一页</button>
    			</div>
    		)
    	}
    	toGoBack(){ 
    		this.props.history.goBack();
    	}
    }
    export default News;

发表评论取消回复

表情：

评论列表（有 0 条评论，41人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue点击跳转路由

第一步：给按钮加点击事件，事件如下 async pageJump() { this.$router.push({ name

野性酷女/ 2024年04月01日 02:18/ 0 赞/ 250 阅读

相关 React react-router-dom配置实现路由跳转

> react-router-dom 实现路由切换，前期已经安装过 react-router-dom。这里增加 store 状态绑定。 import as Reac

谁借莪１个温暖的怀抱￠/ 2023年07月11日 05:50/ 0 赞/ 256 阅读

相关 react 路由跳转底部tab切换

routers.js文件 import React, { Component } from 'react' import { BrowserRouter as

怼烎@/ 2023年06月07日 14:25/ 0 赞/ 119 阅读

相关 React封装路由点跳方法

router.js: import React from 'react'; import { BrowserRouter,Route,Redirec

小鱼儿/ 2023年03月06日 03:21/ 0 赞/ 42 阅读

相关 REACT_react中路由如何封装

1.新建文件 /routes/index.js /routes/routes.js 2.封装路由文件 index.js 可以导入相应的组件，也可以直接在里面

悠悠/ 2023年03月03日 11:18/ 0 赞/ 35 阅读

相关 React路由

React路由安装 react-router相关标签简单路由跳转嵌套路由跳转动态链接路由匹配优化重定向路由传

梦里梦外;/ 2022年10月22日 07:33/ 0 赞/ 379 阅读

相关 react--实现js跳转路由

实现js跳转路由： / 实现js跳转路由：https://reacttraining.com/react-router/web/exampl

雨点打透心脏的1/2处/ 2021年12月11日 00:17/ 0 赞/ 438 阅读

相关 React路由

路由路由最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。实现spa应用： 1. 整个项目只有一个完整页面

末蓝、/ 2021年07月25日 01:40/ 0 赞/ 702 阅读

相关 react 路由安装配置方法

1.安装react-router-dom npm install react-router-dom --save-dev 2.创建一个router.js 引入路由

ゝ一纸荒年。/ 2021年07月25日 01:33/ 0 赞/ 785 阅读

相关 react 路由重定向、动态跳转

重定向: 1、引入 import {BrowserRouter as Router,Link,Route,Redirect,Switch} fro

阳光穿透心脏的1/2处/ 2021年07月24日 18:52/ 0 赞/ 976 阅读