react-router-dom基础

先npm react router dom
然后导入别忘记

 import {BrowserRouter as Router,Switch,Route,Link} from "react-router-dom";
import { HashRouter as Router, Switch, Route, Link } from "react-router-dom";

使用的时候
别忘记外层包围

   
       <Router>
          <ul>
            <li>
              <Link to="/bpp">bpp</Link>
            </li>
            <li>
              <Link to="/cpp">cpp</Link>
            </li>
            <li>
              <Link to="/cpp/dpp">cpp</Link>
            </li>
          </ul>
          <Switch>
            <Route strict exact path="/" component={Bpp}></Route>
            <Route strict exact path="/cpp" component={Cpp}></Route>
            <Route strict path="/cpp/dpp" component={Dpp}></Route>
            <Route
              path="/demo"
              render={(props) => (
                <div>hello world</div>
              )}
            ></Route>
            <Route  component={Notfound}></Route>
          </Switch>
        </Router>

       

HashRouter与BrowseRouer小区别

HashRouter :主要是锚点链接
BroswerRouter：H5新特性，/history.push如果上线之后，需要后台的一些处理，重定向处理，不然会404bug

Link

to对应组件名，小写

<Link to="/home">home</Link>

exact

精准匹配默认为true
加了exact不会同时显示demo和ucenter两个页面，只会显示我们需要的ucenter页面

<Route exact={true} path="/demo" component={Demo}></Route>
<Route path="/demo/ucenter" component={Ucenter}></Route>

strict

精准匹配默认为true
当参数后面有了一些其他的东西或者/，设置精准匹配不会显示页面

<Route strict exact path="/demo" component={Demo}></Route>

默认主页

path="/"
别忘记给主页面加exact,否则/都默认匹配，就会再每个页面都显示

<Route exact path="/" component={Home}></Route>

404页面

当地址错误，或者地址不存在的时候使用
先配置一个404页面，然后放到Route中不需要path
将需要被设置的页面全部放到<Switch>组件下

 <Switch>
     <Route exact path="/" component={Home}></Route>
     <Route strict exact path="/demo" component={Demo}></Route>
     <Route strict exact path="/demo/ucenter" component={Ucenter}></Route>
     <Route  component={Notfound}></Route>
 </Switch>

render加载组件

路径名一样需要，但是component可以省去，在render里面加载组件
也可以使用已经有的组件，rander一个组件，还可以通过render方法来传递参数

<Route strict exact path='/hello' render={()=><div>hello world</div>}></Route>

NavLink

高亮显示，对比Link被选中的有一个active类名，我们可以在这个类名上做样式
也可以修改我们需要的类名，使用activeClassName=“自定义类名”
还可以直接写样式 activeStyle

            <ul>
                <li>
                 {/*<NavLink activeStyle={{color:'red'}} exact to="/">home</NavLink>*/}
                 {/*<NavLink activeClassName='style' exact to="/">home</NavLink>*/}
                    <NavLink exact to="/">home</NavLink>
                </li>
                <li>
                    <NavLink exact to="/demo">demo</NavLink>
                </li>
                <li>
                    <NavLink to="/demo/ucenter">ucenter</NavLink>
                </li>
            </ul>

URL参数处理

在path后面加上/：参数名 就比如说path='/demo:id'
然后我们在浏览器中 http://localhost:3000/#/demo/100 写入一个参数100
我们就可以在我们的demo的props中拿到我们传入的参数props.match.params.id
而在参数后面加一个问号，代表这个参数可有可无,页面就不会报错
也可以传多个参数

<Route strict exact path="/demo/:id?" component={Demo}></Route>
<Route strict exact path="/demo/:id/:name?" component={Demo}></Route>多个参数

class Demo extends Component {
    constructor(props) {
        super(props);
        this.state = {}
        console.log(props);
    }
    render() {
        return (
        <div>Demo:{this.props.match.params.id}</div>
        <div>Demo:{this.props.match.params.name}</div>
        );
    }
}

参形式

单个参数http://localhost:3000/#/demo/1001
多个参数http://localhost:3000/#/demo/1001/ticktack

Link to

              <Link
                to={{
                  pathname: "/cpp",
                  search: "?sort=name",
                  hash: "#the-hash",
                  state: { fromDashboard: true },
                }}
              >
                cpp
              </Link>

Redircet 重定向

选择hellomine页面还是跳转到mine页面

            <Redirect from='/hellomine' to='/mine'></Redirect>

重定向当输入错误的页面或者页面不存在的时候，我们自动跳到指定页面

别忘记把404页面匹配去掉不然的话，会跳转到404页面，而且Redeirect必须放在最后面

<Router>
          <Nav></Nav>
          <Switch>
            <Route exact path="/" component={Home}></Route>
            <Route strict exact path="/demo/:id?" component={Demo}></Route>
            <Route strict exact path="/demo/ucenter" component={Ucenter}></Route>
            <Route strict exact path='/hello' render={()=><div>hello world</div>}></Route>
            <Route path='/shop' component={Shop}>shop</Route>
            <Redirect from='/*' to='/'></Redirect>
          </Switch>
        </Router>

解决重定向未登录跳转登录的问题

当我们点击一个页面的时候，我们未登录，会自动帮我们跳转到登录页面。
先配置页面，别忘记在switch中配置页面，不然会404错误

import { HashRouter as Router, Link, Switch, Route, Redirect } from "react-router-dom";

          <Switch>
            <Route strict exact path="/" component={Bpp}></Route>//未登录跳转到的页面
            <Route strict exact path="/shop" component={Shop}></Route>//<Route>中间不可以写任何东西，不然效果无效
            <Route component={Notfound}></Route>
          </Switch>

class Shop extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            isLogin:false
         }
    }
    render() { 
        const{isLogin}=this.state
        return ( 
            isLogin?
            <div>shop</div>
            :<Redirect  to='/'></Redirect>to是我们没有登录的时候
            需要跳转到我指定的页面，也就是登录页面
         );
    }
}

React router push和replace

点击按钮回到指定的页面

handleClick() {
        console.log(this.props)
        this.props.history.push('/')push叠加上一次的页面依然存在内存中
        this,props.history.replace('/') replace是替换，所以上一次的页面不存在了
    }


  <button onClick={this.handleClick.bind(this)}>回到home页面</button>

withRouter

withRouter的作用就是, 如果我们某个东西不是一个Router, 但是我们要依靠它去跳转一个页面, 比如点击页面的logo, 返回首页, 这时候就可以使用withRouter来做.
在这个例子中, 我将按钮使用withRouter作为一个可点击跳转的Link
高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.

用于页面不在路由之中
在我们demo中引入我们的MIneDemo，由于MineDemo没有被路由管理，所以我们使用WithRouter来管理

import MineDemo from './MineDemo'
 render() {
        return (
            <div>
                <MineDemo></MineDemo>
            </div>
        );
    }

在我们的MineDemo中使用高阶组件WithRouter

import React, { Component } from 'react';
import {withRouter} from 'react-router-dom'
class Demo extends Component {
    handleClick() {
        console.log(this.props)
        this.props.history.push('/')
        this.props.history.replace('/')
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick.bind(this)}>回到home页面</button>
            </div>
        );
    }
}

export default withRouter(Demo)

Prompt

离开页面时给的提示信息
when：设置是否启用Prompt功能。比如表单页未填写时，就不需要离开确认。
message：string。设置Prompt提示内容
··

class Shop extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: ''
        }
    }
    render() {
        return (
            <div>
                <Prompt
                    when={this.state.value}
                    message='确定离开页面吗'
                ></Prompt>
                <input onChange={(e) => this.setState({ value: e })}></input>
            </div>
        );
    }
}

路由嵌套

当我的主页面有一个book页面，book页面下面有两个子页面分别是webbook和javabook页面
这时需要路由的嵌套
首先我们的三个页面分别定义好，并导入到App主页面，然后将我们的book页面放在路由之中，接着在book页面里面嵌套一个新的路由
第二层路由里面path写我们的二级地址，直接写path=“/webbook”无法跳转，一定要写path="/book/webbook" 另外在我们的父组件中一定不要忘记了给子组件显示的位置，也就是{this.props.children}

import Book from "./Book";
import JavaBook from "./JavaBook";
import WebBook from "./WebBook";

<Book path="/book" component={Book}>
  <Switch>
      <Route exact strict path="/book/webbook" component={WebBook}></Route>
      <Route exact strict path="/book/javabook" component={JavaBook}></Route>
  </Switch>
 </Book>
          Book页面中展示我们的子页面
class Book extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return ( 
            <div>
                <div>Book:{this.props.children}</div>
            </div>
            
         );
    }
}