Rote的路由配置

路由配置"/>

Rote的路由配置

Rote的路由配置

官 网 ： h t t p s : / / r e a c t r o u t e r . c o m / w e b / a p i 官网： 官网：

Router的属性

1、exact

作用：设置了该属性之后，url地址后面就不可以再接子路径。

案例：

import React from 'react';import { BrowserRouter, Link, Route, Switch } from 'react-router-dom';import One from "./view/One"
import Two from "./view/Two"
import Three from "./view/Three"export default function App() {return (<BrowserRouter>{/* 主题内容 */}<Switch><Route path="/One" exact><Route path="/one" children={ ()=>{ return <One/>} } /></Route><Route path="/Two"><Route path="/two" component={Two} /></Route><Route path="/Three"><Route path="/three" component={Three} /></Route></Switch>{/* 底栏 */}<nav className="footer border-top"><Link to="/one">One</Link><Link to="/two">Two</Link><Link to="/three">Three</Link></nav></BrowserRouter>)
}

2、strict

作用：判断子路径的个数是否匹配。

3、sensitive

作用：是否对大小写有严格要求

Router的类型

在React的路由中，一个路由容器就是一个路由系统。一般一个项目只需要一个路由系统。并且Router路由系统的标签，不能再包含Router了。

低级接口

import React from "react";
import { Route, Link } from "react-router-dom";<Router> </Router>

history路由

import React from "react";
import { BrowserRouter, Route, Link } from "react-router-dom";
# 或者引入下面的包，下面是将<BrowserRouter>标签转换成Router标签
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";<BrowserRouter> </BrowserRouter>

hash路由

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";<HashRouter> </HashRouter>

abstract路由

<MemoryRouter></MemoryRouter>

Link 的属性

Link的to属性

案例：

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import One from "./pages/One";
import Two from "./pages/Two";
import Mine from "./pages/Mine";
import Login from "./pages/Login";import React, { Component } from "react";export default class App extends Component {state = {isLogin: false};render() {return (<Router><Route path="/one" component={One} /><Route path="/two" component={Two} /><Route path="/mine" component={Mine} /><Route path="/login" component={Login} />{/* Link的to属性：1. 为string类型2. 为object类型3. 为函数*/}<nav><Link to="/one">壹</Link><Link to="/two">贰</Link>{/* to属性对应的函数，要返回link切换的地址。有了函数之后，地址可以进行逻辑判断和运算得到。 */}<Linkto={(match) => {return this.state.isLogin ? "/mine" : '/login';}}>叁</Link></nav></Router>);}
}

Link的ref属性

在React中，

​ 给组件设置ref属性，获得的是这个组件对象；

​ 给普通的html标签设置ref属性，获得的是html标签中的dom对象

​ 注意：如果在Link标签上设置ref属性，获得的是html中a标签的对象。因为Link组件会经过编译成a标签。

案例：

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import One from "./pages/One";
import Two from "./pages/Two";
import Three from "./pages/Three";
import React, { Component } from "react";
import Box from "./components/Box";export default class App extends Component {state = {isLogin: false,};boxRef = React.createRef();boxComRef = React.createRef();linkRef = React.createRef();render() {return (<Router><Route path="/one" component={One} /><Route path="/two" component={Two} /><Route path="/three" component={Three} /><div className="box" ref="box">1</div><div className="box" ref={(dom)=>{this.box = dom;}}>2</div><div className="box" ref={this.boxRef}>3</div><Box ref="boxCom"/><Box ref={(box)=>{this.boxCom = box;}}/><Box ref={this.boxComRef}/><nav><Link to="/one" innerRef={(link)=>{this.link = link;}}>壹</Link><Link to="/two" innerRef={this.linkRef}>贰</Link><Link to="/three">叁</Link></nav></Router>);}componentDidMount(){// 获得Link组件内部的a标签console.log(this.link);console.log(this.linkRef.current);}
}

ref的转发

DOM对象：

在React中，给普通的html标签设置ref属性，获得的是这个html标签的dom对象。

组件对象：

在React中，给组件标签设置ref属性，获得的是这个组件的对象。

案例：

import React, { Component } from "react";
import Foo from "./components/Foo";
import Box from "./components/Box";/*
通常：
在react中，给普通的html标签设置ref获得的是这个html标签的dom对象。
在react中，给组件标签设置ref，获得的是这个组件对象。给组件设置ref，要注意：函数式组件不可以设置ref
*/export default class App extends Component {// 定义reffooRef = React.createRef();boxRef = React.createRef();constructor(){super();this.fooRef.current = 'test';}render() {return (<div>{/* 赋值ref */}<Foo title="test" ref={this.fooRef} /><Box ref={this.boxRef} /><button onClick={this.btn1Action}>++</button><button onClick={this.btn2Action}>重置</button></div>);}componentDidMount(){// 访问// 给函数式组件设置ref，函数式组件一定要使用ref转发的功能，ref的设置是为了获得函数式组件内部的结构。console.log(this.fooRef.current);// 给class组件设置ref，为了拿到这个组件，操作组件。console.log(this.boxRef.current);}btn1Action = () => {//获得了box组件const box = this.boxRef.current;// 操作组件statebox.setState({count: box.state.count+1});}btn2Action = () => {//获得了box组件，获得box的current属性值const box = this.boxRef.current;// 调用组件的方法box.reset();}
}

注意：

给组件设置ref时，函数式组件不能设置ref属性。

NavLink 标签

设置标签，然后对当前点击的样式进行增加className。

import React, { Component } from 'react'
import Foo from './components/Foo'
import Box from './components/Box'
import { BrowserRouter as Router, Route, NavLink} from 'react-router-dom'export default class App extends Component {render() {return (<Router><div>test</div><Route path="/foo" component={Foo}/><Route path="/box" component={Box}/><NavLink to="/foo">foo</NavLink><NavLink to="/box">box</NavLink>{/* activeClassName: */}{/* <NavLink activeClassName="selected" to="/foo">foo</NavLink><NavLink activeClassName="selected" to="/box">box</NavLink> */}{/* activeStyle: */}{/* <NavLink activeStyle={{color: 'red'}} to="/foo">foo</NavLink><NavLink activeStyle={{color: 'red'}} to="/box">box</NavLink> */}{/* <NavLink exact to="/foo">foo</NavLink><NavLink to="/box">box</NavLink> */}{/* isActive: */}{/* <NavLink to="/foo">foo</NavLink><NavLink to="/box" isActive={(match, location)=>{//.............return match ? true : false;}}>box</NavLink> */}</Router>)}
}

Swithc 标签

import React, { Component } from 'react'
import Foo from './components/Foo'
import Box from './components/Box'
import Home from './components/Home'
import NotFound from './components/NotFound'
import { BrowserRouter as Router, Route, NavLink, Switch} from 'react-router-dom'export default class App extends Component {render() {/* switch (path) {case "/"://......Homebreak;case "/foo"://......Foobreak;case "/box"://......Boxbreak;default://。。。。NotFoundbreak;} */return (<Router><Switch><Route path="/" exact component={Home}/><Route path="/foo" component={Foo}/><Route path="/box" component={Box}/>{/* 以下三种写法都是匹配所有路径的意思。 */}{/* <Route path="/" component={NotFound}/> */}{/* <Route path="*" component={NotFound}/> */}<Route component={NotFound}/></Switch><NavLink to="/">home</NavLink><NavLink to="/foo">foo</NavLink><NavLink to="/box">box</NavLink></Router>)}
}

Redirect 重定向

import React, { Component } from "react";
import Foo from "./components/Foo";
import Box from "./components/Box";
import Home from "./components/Home";
import NotFound from "./components/NotFound";
import {BrowserRouter as Router,Route,NavLink,Switch,Redirect,
} from "react-router-dom";export default class App extends Component {render() {return (<Router>{/* <Redirect to="/home" exact from="/" /><Route path="/home" exact component={Home} /><Route path="/foo" component={Foo} /><Route path="/box" component={Box} /> */}{/* 当Redirect只设置了to属性时，那么直接执行重定向。 */}<Route path="/" exact render={() => <Redirect to="/home" push />} />{/* 当from属性匹配时，切换到to的位置 */}<Redirect from="/one" to="/foo" /><Route path="/home" component={Home} /><Route path="/foo" component={Foo} /><Route path="/box" component={Box} /><NavLink to="/" exact>home</NavLink><NavLink to="/foo">foo</NavLink><NavLink to="/box">box</NavLink></Router>);}
}