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?
但是大致还是相同的，很多办法都是可以互相用的
