React 基础笔记(React 路由 版本)(二十一)

React 路由必须要用 React-router-dom

npm i  react-router-dom -S

基础版本

(1)在要使用的路由页面使用 BrowserRouter,Route

import { BrowserRouter, Route } from 'react-router-dom'

• 引用 BrowersRouter,Route 组件 Router 里面有四个属性 一个 path 一个 render 渲染函数,一个 exact 表示绝对匹配 一个 component 渲染组件

• 不加 exact 的话 你访问/detail 的时候它会把前面的主页也渲染出来，路径不是绝对匹配

• Route 相当于 Vue 里面的 router-view

• 代码如下

import { BrowserRouter as Router, Link, Route } from 'react-router-dom'
import List from '../layout/home-page-layout'
;<BrowserRouter>
  <div>
    <Route
      path="/"
      render={() => {
        return <div>主页</div>
      }}
      exact
    />
    <Route path="/detail" component={List} exact />
  </div>
</BrowserRouter>

(2)组件里面使用的时候跳转用 Link(最好使用 NavLink,后面会介绍)

import { BrowserRouter as Router, Link } from 'react-router-dom'
class Main extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/other">其他页</Link>
            </li>
          </ul>
        </div>
      </Router>
    )
  }
}

(3) 完整版

import React, { Component } from 'react'

import { render } from 'react-dom'

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

class Home extends Component {
  render() {
    return <div>this a Home page</div>
  }
}
class Other extends Component {
  render() {
    return <div>this a Other page</div>
  }
}
class Main extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/home">首页</Link>
            </li>
            <li>
              <Link to="/other">其他页</Link>
            </li>
          </ul>
          <Route path="/home" component={Home} />
          <Route path="/other" component={Other} />
        </div>
      </Router>
    )
  }
}

render(<Main />, document.getElementById('root'))

路由传递参数

params

<Route path='/path/:name' component={Path}/>
<link to="/path/2">xxx</Link>
this.props.history.push({pathname:"/path/" + name});
读取参数用:this.props.match.params.name

好处刷新地址栏参数依旧存在,坏处只能传递字符串，URL 过长

query

<Route path='/query' component={Query}/>
<Link to={{ pathname : ' /query' , query : { name : 'sunny' }}}>
this.props.history.push({pathname:"/query",query: { name : 'sunny' }});
读取参数用: this.props.location.query.name

好处 传参优雅 坏处刷新页面 参数消失

state

<Route path='/sort ' component={Sort}/>
<Link to={{ pathname : ' /sort ' , state : { name : 'sunny' }}}>
this.props.history.push({pathname:"/sort ",state : { name : 'sunny' }});
读取参数用: this.props.location.query.state.name

好处坏处同 query

search

<Route path='/web/departManange ' component={DepartManange}/>
<link to="web/departManange?tenantId=12121212">xxx</Link>
this.props.history.push({pathname:"/web/departManange?tenantId" + row.tenantId});
读取参数用: this.props.location.search

好坏处同 params

注意事项

1. Router 里面只能出现一个子节点.
2. Link 必须放在 BrowserRouter 的里面否则不能用

要是使用函数跳转的话,必须要在页面上引用 withRouter,否则不起作用,要是子路由获取参数也需要 withRouter

import React, { Component, Fragment } from 'react'
import { Toppic as Topwrapper } from '../style'
import { withRouter } from 'react-router-dom' //引入withRouter
class Toppic extends Component {
  constructor(props) {
    super(props)
    this.state = {
      showflag: false
    }
  }
  componentDidMount() {
    let _this = this
    window.addEventListener('scroll', function() {
      if (document.documentElement.scrollTop > 100) {
        _this.setState({
          showflag: true
        })
      } else {
        _this.setState({
          showflag: false
        })
      }
    })
  }
  render() {
    if (this.state.showflag) {
      return (
        <Fragment>
          <Topwrapper onClick={this.handletop.bind(this)}>顶部</Topwrapper>
        </Fragment>
      )
    } else {
      return null
    }
  }
  handletop() {
    window.scrollTo(0, 0)
    this.props.history.push({ pathname: '/detail', query: { id: 2 } }) //重点看
  }
}

export default withRouter(Toppic) //暴露出去

Switch 作用就是优先匹配，他要是找到第一个，后面的就不再匹配

import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
;<Router>
  <Switch>
    <Route exact path="/" component={Jsdemo} />
    <Route path="/Jsdemob" component={Jsdemob} />
    /*canshu和aa是要传递的两个参数对应的名词*/
    <Route path="/Jsdemoc/:canshu/:aa" component={Jsdemoc} />
    <Redirect from="/redirect" to="/Jsdemob" />
    <Route component={Error} /> //这个一定要在所有连接最后
  </Switch>
</Router>

NavLink 标准 个人建议使用

• Link 的属性他都有,他是 link 的一个特定的版本,会在匹配上当前的 URL 的时候给已经渲染的元素添加参数

1. activeClassName(string) 设置选中样式,默认值 active

2. activeStyle(object) 当前元素被选中时,为元素添加样式

3. exact(bool)为 true 时 只有当导致和完全匹配 class 和 style 才会用

4. strict(bool) 为 true 时,在确定为位置是否与当前 URL 匹配时，将考虑位置 pathname 后的斜线

5. isActive(func)判断链接是否激活额外逻辑的功能

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

// activeClassName选中时样式为selected
<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

// 选中时样式为activeStyle的样式设置
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>

// 当event id为奇数的时候，激活链接
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}

<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>

总结

1. Router 里面要有包裹层

2. NavLink 是链接,可以添加类名之类的