react-router的基本用法

FF_XM

已于 2023-02-06 16:30:07 修改

阅读量221

点赞数

分类专栏：前端文章标签： react.js javascript 前端

于 2022-09-05 12:35:33 首次发布

本文链接：https://blog.csdn.net/ff_xm/article/details/126701136

版权

前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、下载包

npm install react-router-dom@4.3.1 --save

react-router常用组件<BrowserRouter>、<HashRouter>、<Route>、<Redirect>、<Link>、<NavLink>、<Switch>

import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from './components/app'

import './index.css'

ReactDOM.render(
  (
  // BrowserRouter 用来包裹根组件
    <BrowserRouter>
      <App />
    </BrowserRouter>
  ),

  document.getElementById('root')
)

Switch：路由性需要频繁切换时使用；

Route：路由组件；

Redirect：重定向组件；

NavLink：做路由跳转使用

BrowserRouter ：包裹根路由组件

// 导入 React 模块
import React, { Component } from "react";
// react-router-dom路由模块必装的包
import {Switch,Route,Redirect} from 'react-router-dom'

// 自定义组件 (MyNavLink是从react-router-dom的NavLink提出来的自定义组件,用于路由跳转)
import MyNavLink from "../components/my-nav-link";
import News from "./news";
import Message from "./message";

// 暴露并创建react类
export default class Home extends Component {
  render() {
    return (
      <div>
        <h2>home component</h2>
        <ul className="nav nav-tabs">
          <li>
            <MyNavLink to="/home/news" >
              News
            </MyNavLink>
          </li>
          <li>
            <MyNavLink to="/home/message" >
              Message
            </MyNavLink>
          </li>
        </ul>
        <div>
          <Switch >
            <Route path='/home/news' component={News}></Route>
            <Route path='/home/message' component={Message}></Route>
            <Redirect to='/home/news' />
          </Switch>
        </div>
      </div>
    );
  }
}