<Route path="/home" component={Home} />
或
<Route path="/home" component={(router)=><Home {…router} />} />

import React, { Component } from 'react'
import { Route } from 'react-router-dom'
// 匹配成功后渲染的組件
import RenderCmp from './views/Render'
class App extends Component {
  render() {
    return (
      <div>
        {/*
          component
          類方式：
          1.對(duì)于規(guī)則匹配成的組件沒(méi)有辦法去寫(xiě)邏輯，會(huì)直接渲染
          2.規(guī)則匹配成功后，會(huì)給組件中的props自動(dòng)映射對(duì)應(yīng)的路由對(duì)象
          3.當(dāng)前載體中的state更新,它不會(huì)重新創(chuàng)建
        */}
        <Route path="/" component={RenderCmp} />
        {/* 
          component
          函數(shù)方式：
          1.可以在規(guī)則匹配成功后，進(jìn)行業(yè)務(wù)邏輯的判斷來(lái)決定最終是否渲染
          2.規(guī)則匹配成功后，它需要你把回調(diào)函數(shù)中的路由對(duì)象，手動(dòng)的通過(guò)props傳給要渲染的組件
          3.當(dāng)前的載體中的state如果,發(fā)生改變,則它對(duì)應(yīng)匹配要渲染的組件會(huì)銷毀并重新創(chuàng)建
          建議: component屬性的回調(diào)函數(shù)的方式,不要在工作中使用,可以用 render來(lái)代替
        */}
        {/* <Route
          path="/"
          component={route => {
            if (true) {
              return <RenderCmp {...route} />
            }
            return <div>沒(méi)有權(quán)限</div>
          }}
        /> */}
      </div>
    )
  }
}
export default App

<Route path="/home" render={<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->router=><Home {<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->…router} />} />

import React, { Component } from 'react'
import { Route } from 'react-router-dom'
// 匹配成功后渲染的組件
import RenderCmp from './views/Render'
class App extends Component {
  render() {
    return (
      <div>
        {/* 
          render渲染方式
          它有component類的優(yōu)點(diǎn)也有component回調(diào)的優(yōu)點(diǎn),但沒(méi)有component回調(diào)中的缺點(diǎn)
        */}
        <Route
          path="/"
          render={route => {
            if (true) {
              return <RenderCmp {...route} />
            }
            return <div>沒(méi)有權(quán)限</div>
          }}
        />
      </div>
    )
  }
}
export default App

import React, { Component } from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
// 匹配成功后渲染的組件
import RenderCmp from './views/Render'
import Login from './views/Login'
class App extends Component {
  render() {
    return (
      <div>
        <Switch>
          <Route path="/login" component={Login} />
          <Route
            path="/render"
            render={route => {
              if (sessionStorage.getItem('uid')) {
                return <RenderCmp {...route} />
              }
              return <Redirect to="/login" />
            }}
          />
        </Switch>
      </div>
    )
  }
}
export default App

import React, { Component } from 'react'
class Login extends Component {
  render() {
    return (
      <div>
        <h3>用戶登錄</h3>
        <button
          onClick={() => {
            sessionStorage.setItem('uid', 1)
            this.props.history.push('/render')
          }}
        >
          登錄一下
        </button>
      </div>
    )
  }
}
export default Login

// 全匹配
<Route path="/about" children={router =>{
	return <div>children渲染</div>
}} />
或
// 精確匹配
<Route path="/about" children={<About />} />

import React, { Component } from 'react'
import { Redirect, Route, Switch } from 'react-router-dom'
// 匹配成功后渲染的組件
import RenderCmp from './views/Render'
// import Login from './views/Login'
class App extends Component {
  render() {
    return (
      <div>
        {/* 
          children屬性中傳入jsx元素,則它會(huì)根據(jù)path路徑來(lái)匹配規(guī)則,如果匹配成功則渲染,不會(huì)自動(dòng)注入路由對(duì)象到props中
        */}
        {/* <Route path="/sdfsf" children={<RenderCmp />} /> */}
        
        {/* 
          children屬性為一個(gè)函數(shù),則它的渲染不會(huì)根據(jù)路由規(guī)則來(lái)匹配渲染,它默認(rèn)都會(huì)渲染出來(lái)
          在此函數(shù)的形參中有一個(gè)路由對(duì)象,此對(duì)象中有一個(gè)match屬性,如果當(dāng)前訪問(wèn)的地址和path路徑一致,則返回為對(duì)象,否則為null
          函數(shù)方式: 如果你當(dāng)前的頁(yè)面中有一些顯示的元素它在任何的地址中都要顯示,且還要根據(jù)是否是激活路由,而高亮出來(lái),就可以用它
        */}
        <Route
          path="/home"
          children={route => {
            // console.log('match', route.match)
            // return <RenderCmp {...route} />
            // 手動(dòng)添加規(guī)則：路徑一致才渲染
            return route.match ? <RenderCmp {...route} /> : null
          }}
        />
      </div>
    )
  }
}
export default App

// 引入withRouter
import { withRouter} from 'react-router-dom'
// 執(zhí)行一下withRouter
export default withRouter(Cmp)

import React, { Component } from 'react'
// withRouter 讓非路由直接匹配渲染的組件中能得在this.props中得到路由對(duì)象
import { Redirect, Route, Switch, withRouter } from 'react-router-dom'
// 匹配成功后渲染的組件
// import RenderCmp from './views/Render'
import Home from './views/Home'
import Detail from './views/Detail'
// 裝飾器寫(xiě)法
// @withRouter
class App extends Component {
  state = {
    num: 100
  }
  componentDidMount() {
    // 手動(dòng)讓第1次執(zhí)行
    this.listenerRouter(this.props.location)
    // 監(jiān)聽(tīng)路由變化則觸發(fā)  第1次它只注冊(cè),不執(zhí)行回調(diào)
    this.props.history.listen(this.listenerRouter)
  }
  listenerRouter = ({ pathname }) => {
    console.log('listener', pathname)
    // 只有登錄直接訪問(wèn),別的都要判斷是否登錄
    if(pathname!=='/login'){
      // 判斷是否登錄
      // if(xxx)
      // this.props.history.replace('/login')
      return;
    }
  }
  render() {
    // console.log('app', this.props)
    return (
      <div>
        <Switch>
          <Route path="/home" component={Home} />
          <Route path="/detail" component={Detail} />
        </Switch>
      </div>
    )
  }
}
// 對(duì)應(yīng)裝飾器寫(xiě)法
// export default App
export default withRouter(App)

import React, { Component } from 'react'
import Mylink from './components/Mylink'
import { Route, Switch } from 'react-router-dom'
import Home from './views/Home'
import About from './views/About'
class App extends Component {
  render() {
    return (
      <div className="app">
        <Mylink tag="h3" to="/home">
          home頁(yè)面
        </Mylink>
        <Mylink tag="h3" to="/about">
          about頁(yè)面
        </Mylink>
        <hr />
        {/* 路由規(guī)則 */}
        <Switch>
          <Route path="/home" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    )
  }
}
export default App

// Fragment 它可以當(dāng)作頂層元素來(lái)包裹子元素,但它不會(huì)編譯成html元素
// Fragment 有簡(jiǎn)寫(xiě),簡(jiǎn)寫(xiě)時(shí),可以不需要導(dǎo)入Fragment組件 <></>
// import React, { Component, Fragment } from 'react'
import React, { Component } from 'react'
import { withRouter, Route } from 'react-router-dom'
import types from 'prop-types'
@withRouter
class Mylink extends Component {
  jumpUrl = () => {
    this.props.history.push(this.props.to)
  }
  render() {
    let { tag: Tag, children, to, activeClassName } = this.props
    return (
      <>
        <Route
          path={to}
          children={({ match }) => {
            // 高亮
            let className = match ? activeClassName : ''
            return (
              <Tag className={className} onClick={this.jumpUrl}>
                {children}
              </Tag>
            )
          }}
        />
      </>
    )
  }
}
// 字段限制
Mylink.propTypes = {
  to: types.string.isRequired,
  tag: types.string,
  activeClassName: types.string
}
// 默認(rèn)值
Mylink.defaultProps = {
  tag: 'a',
  activeClassName: 'active'
}
export default Mylink