react-router简明学习

<BrowserRouter>
<HashRouter>
<MemoryRouter>
<NativeRouter>
<StaticRouter>

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

<BrowserRouter
  basename={optionalString}
  forceRefresh={optionalBool}
  getUserConfirmation={optionalFunc}
  keyLength={optionalNumber}
>
  <App/>
</BrowserRouter>

<BrowserRouter basename="/calendar"/>

// 使用默认的确认函数
const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}

<BrowserRouter getUserConfirmation={getConfirmation}/>

const supportsHistory = 'pushState' in window.history
<BrowserRouter forceRefresh={!supportsHistory}/>

<BrowserRouter keyLength={12}/>

:paramName – 匹配一段位于 /、? 或 # 之后的 URL。 命中的部分将被作为一个参数
() – 在它内部的内容被认为是可选的
* – 匹配任意字符（非贪婪的）直到命中下一个字符或者整个 URL 的末尾，并创建一个 splat 参数

<Route path="/hello/:name">         // 匹配 /hello/michael 和 /hello/ryan
<Route path="/hello(/:name)">       // 匹配 /hello, /hello/michael 和 /hello/ryan
<Route path="/files/*.*">           // 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg

'/category/:_id'

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

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</Router>

<Route path="/home" render={() => <div>Home</div>}/>

const ListItemLink = ({ to, ...rest }) => (
  <Route path={to} children={({ match }) => (
    <li className={match ? 'active' : ''}>
      <Link to={to} {...rest}/>
    </li>
  )}/>
)

<Route  path="/one" component={A}/>
<Route  path="/one/two" component={B}/>

<Route  exact path="/one" component={A}/>
<Route  path="/one/two" component={B}/>

<Route  strict path="/one/" component={A}/>

<Route  strict path="/one" component={A}/>
<Route  path="/one/two" component={B}/>

<Route  exact strict path="/one" component={A}/>

params 键值对
isExact 是否确切匹配
path 路径中设置的值
url URL中的path值

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere'
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

length: history栈的长度
action: 当前的action
location: 当前的location对象

push()
goBack() = go(-1)
goForward() = go(1)
go() 跳转到 history栈中的哪个enter
replace(path, [state]) 替换history栈中的当前entry
push(path, [state])  添加当前entry到history栈中

<Route exact path="/" render={() => (
  loggedIn ? (
    <Redirect to="/dashboard"/>
  ) : (
    <PublicHomePage/>
  )
)}/>

<Redirect to={{
  pathname: '/login',
  search: '?utm=your+face',
  state: { referrer: currentLocation }
}}/>

<Redirect push to="/somewhere/else"/>

<Link to="/about">关于</Link>

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

<Link>
  <div onclick={}></div>
</Link>
<Link onclick={}>

<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>

<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/:user" component={User}/>
  <Route component={NoMatch}/>
</Switch>

// utils/history.js
import createBrowserHistory from 'history/createBrowserHistory'
const customHistory = createBrowserHistory()
export default customHistory

import  history  from '@/utils/history'
// 跳转到首页
history.push('/')

import { Router, Route, Switch, Redirect } from 'react-router-dom'
import history from '@/utils/history'

<Router history={history}>
  <Switch>
    <Route path="/login" component={Login} />
    <Route path="/" render={props => {if (sessionStorage.getItem('token') && sessionStorage.getItem('user')) {return <Home {...props} />
        }
        return <Redirect to="/login" />
      }} />
  </Switch>
</Router>

history.push({
  pathname: '/about',
  search: '?the=search',
  state: { some: 'state' }
})

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

// 三个基础呈现组件

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

// 一个内嵌的组件

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic}/>
    <Route exact path={match.url} render={() => (
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)

// 首页组件

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)
export default BasicExample

<Switch>
  <Route path="/post/add" component={AddPost} />  
  <Route exact path="/post/:id" component={ShowPost} />        
  <Route path="/post/:id/update" component={UpdatePost} />
  <Route path="/post/:id/delete" component={DeletePost} />
</Switch>

<Route path="/posts/add" component={AddPost} />  
<Route path="/post/:id" component={ShowPost} />        
<Route path="/post/:id/update" component={UpdatePost} />
<Route path="/post/:id/delete" component={DeletePost} />