react-router-dom学习及案例

React Router DOM详解

最新推荐文章于 2025-05-25 15:47:02 发布

原创最新推荐文章于 2025-05-25 15:47:02 发布 · 483 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react

html5 同时被 2 个专栏收录

10 篇文章

订阅专栏

react

1 篇文章

订阅专栏

本文深入讲解React Router DOM的三大核心组件：Router、Route和Link，介绍如何使用它们进行路由匹配和组件展示。同时，涵盖了HashRouter、BrowserRouter等不同类型的路由器组件，以及如何通过history API实现路由切换。

react-router-dom学习

三大核心：

Router 所有组件共用的最外层
Route 路由规则匹配，并显示当前规则匹配到的组件
Link 路由的跳转组件，会渲染为a标签【通过this.props.history.push(path)来改变HashRouter中的pathname属性，进而驱动Route们进行重新渲染，匹配路由实现路由切换】

其他：

HashRouter url为hash的路由，原理是window.location.hash
BrowserRouter 浏览器的路由组件
MeroryRouter 内存路由组件
NativeRouter native的路由组件
StaticRouter 地址不变的路由组件

具体操作：

下载

使用npm
npm install react-router-dom //或者 cnpm install react-router-dom
使用yarn
yarn add react-router-dom //或者 tyarn add react-router-dom

使用

router.js 【exact为精准匹配】

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

 import Login from '../pages/login';//登陆页面
 import Home from '../pages/home';//首页

const BaseRoute = () => {
  return (
    <HashRouter>
      <Switch>
        <Route path="/" exact key="home" component={Home}/>
        <Route path="/home" exact key="home" component={Home}/>
        <Route path="/login" exact key="login" component={Login}/>
      </Switch>
    </HashRouter>
  )
};
export default BaseRoute;

index.js

import React from 'react';
import ReactDOM from 'react-dom'; 
import BaseRoute from './router'

ReactDOM.render(
  <React.StrictMode>
    <BaseRoute/>
  </React.StrictMode>,
  document.getElementById('root')
);

home.js

import React,{Component} from 'react'

class Home extends Component{
  optionTo(){
	this.props.history.push('/login')
  }
  render(){
    return (
      <div>
      我是首页
      <p onClick={this.optionTo.bind(this)}>点我去登陆</p>
      </div>
    )
  }
}
export default Home;

import React,{Component} from 'react'

class Login extends Component{
  render(){
    return (
      <div>
        我是登陆页
        
      </div>
    )
  }
}
export default Login;