react 路由跳转 / react-router-dom 使用

react 核心包

• react-router --------- 核心组件
• react-router-dom-----应用于浏览器端的路由库（webApp）
• react-router-native React Native环境下使用的包（原生 App）
• react-router-config 静态路由下使用的包

这些包你干什么单独下载某个即可使用，里面包=包含核心包

---

• gitHub介绍网址
• react-router 官网
• react-router 中文文档

1. 下载 react-router-dom 核心包

yarn add react-router-dom

2. 引用路由（src 下 index.js 文件）

Router组件针对不同功能和平台对应用会有几种不同的子类组件实现：

• 浏览器的路由组件 ⬅⬅⬅
• URL格式为Hash路由组件 ⬅⬅⬅
• 内存路由组件
• Native的路由组件
• 地址不改变的静态路由组件

---

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {
     HashRouter as Router} from "react-router-dom"    //⬅⬅⬅⬅⬅⬅

ReactDOM.render(
  <Router>   //⬅⬅⬅⬅⬅⬅
    <App></App>
</Router>,   //⬅⬅⬅⬅⬅⬅
  document.getElementById('root')
);

• as 定义别名
• 使用 获得的模块Router包裹组件
• HashRouter 可以根据上面的需求自己更换

3. 使用 路由 （基础）

• 根据对应的路由跳转对应的页面

import React, {
      Component } from 'react'
import Home from './view/Home'   //引入页面
import Java from './view/Java'   //引入页面
import Web from './view/Web'     //引入页面
import {
     Route,Switch,NavLink} from "react-router-dom"   //引入对应模块 ⬅⬅⬅

export default class App extends Component {
     
  render() {
     
    return (
        <div>
          <li><NavLink to="/home" activeStyle={
     {
     color:"red"}}>首页</NavLink></li>
          <li><NavLink to="/Java"activeStyle={
     {
     color:"red"}}>Java</NavLink></li>
          <li><NavLink to="/Web"activeStyle={
     {
     color:"red"}}>Web</NavLink></li>

跳转方式有两种 NavLink 和 Link

• Link 只能跳转，没有 class 和 style
• NavLink 可以设置 class 和 激活样式activeStyle ------- 建议

          <Switch>
              <Route path='/home' component={
     Home}></Route>
              <Route path='/Java' component={
     Java}></Route>
              <Route path='/Web' component={
     Web}></Route>
          </Switch>
        </div>
    )
  }
}

• Route 根据地址栏的参数进行跳转
• path 是对应地址
• component是对应页面（组件）
• Switch是当找到有一个匹配到的就不再往下匹配了
  

4. 使用路由 （高级）

1. 精确匹配，就是必须一模一样的路由参数才能跳转到对应页面 // exact

<Route path='/home' component={
     Home} exact></Route>

2. 重定向 // Redirect

<Redirect to="/home" from="/" exact/>   //当路由参数为 / 的时候重定向到 home 界面

3. 重定向到404

<Route path="/404" component={
     NotFound}/>
<Redirect to="/404"/>    //如果前面的都没有匹配到，这里就会执行 重定向到 /404
						 // 再找到 /404路由对应页面

参数的传递 文章