React封装路由点跳方法

最新推荐文章于 2025-06-01 12:14:36 发布

原创最新推荐文章于 2025-06-01 12:14:36 发布 · 392 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何在React应用中进行路由的封装，以及如何实现页面间的点击跳转。通过修改`router.js`，创建`Home.js`和`News.js`组件，详细阐述了路由配置和组件间导航的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;