react-router-dom 的坑

Router

引入

最常見的用例使用低級<路由器>是同步一個自定義的歷史狀態管理自由像回家的或Mobx。注意,這是不需要使用狀態管理庫與路由器的反應,只有深度集成。

import { Router, Route, Link } from  'react-router-dom'
import createBrowserHistory from 'history/createBrowserHistory'

const history = createBrowserHistory()

<Router history={history}>
  <App/>
</Router>

4.0版本之前 更多是如下應用 發現運行錯誤

正確的是

import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory()

console.log(history)

history 是個對象數據

是個用于瀏覽器導航#的歷史對象

import createBrowserHistory from 'history/createBrowserHistory'

const customHistory = createBrowserHistory()
<Router history={customHistory}/>

history(path, state) //第一個參數是url 第二個是參數

Route

引入

{this.props.children}

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

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

github項目的例子
https://github.com/liupeijun/react-router-v4-maizuo

const router = (
      <Router>
        <App>
          <Switch> {/*Renders the first child <Route> or <Redirect> that matches the location.*/}
          <Route path="/home" component={Home} />
          <Route path="/film" render={()=>
            <Film>
              <Switch>{/*Renders the first child <Route> or <Redirect> that matches the location.*/}
                 <Route path="/film/now-playing" component={NowPlaying}/>
                 <Route path="/film/coming-soon" component={ComingSoon}/>
                 <Redirect from="/film" to="/film/now-playing"/> {/*重定向*/}
              </Switch>
            </Film>
          }>
          </Route>
          <Route path="/cinema" component={Cinema}>
          </Route>
          <Route path="/me" component={Me}>
          </Route>
          <Route path="/card" component={Card} >
          </Route>
          <Route path="/detail/:kerwinId" render={props=>
              <Detail {...props}/>
          }>
          </Route>
          <Redirect from="/" to="/home"/> {/*重定向*/}
          </Switch>
        </App>
      </Router>
    )

hashHisroy

在4.0中 url如果要出現# hash哈希的話
此方法可能不行，小伙伴可自行實踐

import HashRouter from 'react-reoter-dom'


ReactDOM.render((
    <HashRouter history={history}> //router換成HashRouter url:localhost:3000/#/
        <App>
            <Route path='/' component={home} />
            <Route path='/home' component={home} />
            <Route path='/mudidi' component={mudidi} />
            <Route path='/zhuanti' component={zhuanti} />
            <Route path='/daren' component={daren} />
            <Route path='/zijiayou' component={zijiayou} />
        </App>
    </HashRouter>
    ), document.getElementById('root'));

router 4.0 路由跳轉方式

第一種 Link跳轉

import {Link} from  'react-router-dom';

<Link to={'/home'}>homer</Link>

這辦法比較笨，靈活性不高

第二種跳轉方式

4.0版本之前 更多是如下應用 發現運行錯誤

正確的是

import createBrowserHistory from 'history/createBrowserHistory';

const history = createBrowserHistory()

console.log(history)

goNav(path) {
    history.push('/'+ path)
}

router router-dom區別

React Router 4.0 （以下簡稱 RR4） 已經正式發布，它遵循react的設計理念，即萬物皆組件。所以 RR4 只是一堆 提供了導航功能的組件（還有若干對象和方法），具有聲明式（引入即用），可組合性的特點。github:https://github.com/ReactTraining/react-router

RR4 本次采用單代碼倉庫模型架構（monorepo），這意味者這個倉庫里面有若干相互獨立的包，分別是：

• react-router React Router 核心
• react-router-dom 用于 DOM 綁定的 React Router
• react-router-native 用于 React Native 的 React Router
• react-router-redux React Router 和 Redux 的集成
• react-router-config 靜態路由配置的小助手

react-router 還是 react-router-dom？

在 React 的使用中，我們一般要引入兩個包，react 和 react-dom，那么
react-router 和react-router-dom 是不是兩個都要引用呢？
非也，坑就在這里。他們兩個只要引用一個就行了，不同之處就是后者比前者多出了 <Link> <BrowserRouter> 這樣的 DOM 類組件。
因此我們只需引用 react-router-dom 這個包就行了。當然，如果搭配 redux ，你還需要使用 react-router-redux。
what is the diff between react-router-dom & react-router?

但是大致還是相同的，很多辦法都是可以互相用的