React路由简单操作

最新推荐文章于 2025-07-16 11:48:24 发布

原创最新推荐文章于 2025-07-16 11:48:24 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍如何使用React Router DOM进行页面路由配置，包括下载安装、基本用法如HashRouter与BrowserRouter的区别，以及Route、Redirect和Switch组件的具体应用。

1》下载

	npm install react-router-dom --save

2》引入（配置）

	import {HashRouter,Route} from 'react-router-dom';


	HashRouter : 路由的大组件

		***http://localhost:3000/#/

	BrowserRouter（比起上面这个路径中去掉了#）

		***http://localhost:3000/

	Route : 组件的配置项

		path     	:访问的路径
		component	:对应的组件
		exact       :控制匹配到路由时不会再向下匹配

	Redirect  	to  :重定向 跳转到哪个组件(当输入了一个不存在的地址则重定向到...)

	
	
	Switch  : HashRouter下的唯一子元素

APP.js:

import React, { Component } from 'react';
//注意看

import {BrowserRouter,Route,Redirect,Switch} from 'react-router-dom';
import Home from './Home'
import List from './List'

class App extends Component {
  render() {
    return (
      <div>

      	<BrowserRouter>
      		<Switch>
      			<Route path='/' exact component={Home}></Route>
      			<Route path='/list' exact component={List}></Route>
      			<Redirect to='/' />{/*其他情况重定向到首页*/}
      		</Switch>
      	</BrowserRouter>

      </div>
    );
  }
}

export default App;