router

目标

1. 理解路由的原理及应用
2. 理解react-router-dom以及内置的一些组件
3. 合理应用内置组件及其属性搭建项目路由

什么是路由

随着地址栏的变化，视图也跟着变化。

理解路由的原理及应用

1. hash路由
   使用onhashChange 事件监听地址栏哈希值的变化,做对应的视图切换效果

2. history路由
   pushState(object传递对象，描述性文字，url地址)
   使用pushState更改地址栏不会更新页面，同时使用onpopstate监听地址栏变化，多对应的视图切换

react路由安装

$ npm i react-router-dom -S

<Route/>路由出口

path： 设置对应的路由地址 字符串类型

component：渲染对应的组件

render:渲染对应的组件(参数是一个函数,函数必须有返回值 且 返回值是渲染的组件)

<Switch/>做唯一匹配,只显示第一个结果

<Redirect/>重定向

from:从哪里来
to:到哪里去
⚠ 注意事项 重定向写在路由的最下方

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

APP.js

import './App.css';
import {Route,Switch,Redirect} from "react-router-dom"
import Home from "./page/Home/Home"
import My from "./page/My/My"
function App() {
  return (
    <div className="App">
     <Switch>
        //标签中间不要写内容 空格也不行
       <Route path={'/home'} component={ Home }></Route> 
       //一般用于路由拦截 里面可以写逻辑
       <Route path={'/my'} render={()=><My />}></Route>
       <Redirect from="/" to="/home"></Redirect>
     </Switch>
    </div>
  );
}

export default App;

路由跳转标签

1. Link 跳转路由的组件，必须有to属性，字符串类型 => 跳转的路由路径
   <Link to="/home"/>
2. NavLink 自带动态类目 active
   <NavLink to="/home"/>

import {Route,NavLink,Switch,Redirect} from "react-router-dom"
import React from "react";
import Tab1 from "./view/Tab1"
import Tab2 from "./view/Tab2"
const Demo = ()=>{
    return <div>
        <div>
           <NavLink to="/My/Tab1">TAB1</NavLink>
           <NavLink to="/My/Tab2">TAB2</NavLink>
        </div>
        <div className="main">
            <Switch>
              <Route path="/My/Tab1" component={Tab1}></Route>
              <Route path="/My/Tab2" component={Tab2}></Route>
              <Redirect from="/My" to="/My/Tab1"></Redirect>
            </Switch>
        </div>
    </div>
}

export default Demo;