zoukankan      html  css  js  c++  java
  • 笔记react router 4(三)

      上一篇我们说到了路由组件的嵌套。想必你已经运用自如了。那么,这一次我们来聊一聊4.X中Router的变更。

    在3.X中我们若使用路由的模式,可通过在Router上配置history的值即可。

    例如,

    import { Router, Route, hashHistory} from "react-router"
    import routes from "./routes"
    
    <Router history={hashHistory} routes={routes}>
        <Route path="/" component={App}/>
    </Router>

    在4.X中提供几种不同的路由组件来替代history属性的作用,分别是

    <BrowserRouter>

    import { BrowserRouter } from 'react-router-dom'
    
    <BrowserRouter
      basename={optionalString}
      forceRefresh={optionalBool}
      getUserConfirmation={optionalFunc}
      keyLength={optionalNumber}
    >
      <App/>
    </BrowserRouter>

    <HashRouter>

    import { HashRouter } from 'react-router-dom'
    
    <HashRouter>
      <App/>
    </HashRouter>

    <MemoryRouter> 一般用于测试或者无浏览器的环境中,像是react native中

    <MemoryRouter
      initialEntries={[ '/one', '/two', { pathname: '/three' } ]}
      initialIndex={1}
    >
      <App/>
    </MemoryRouter>

    <StaticRouter> 一般用于服务端,永远不会改变location

    <StaticRouter location={req.url} context={context}>
          <App/>
    </StaticRouter>

    需要注意的是,router组件只能有一个子元素

  • 相关阅读:
    浅谈树的重心
    倍增的奇妙用处
    KMP——从入门到不会打题
    万能的进制哈希
    浅谈扫描线算法的应用
    无需Flash录视频——HTML5中级进阶
    一个模仿微信群聊的H5页面
    关于建议
    前端技术学习线路
    Kurento安装与入门02——运行示例前的准备
  • 原文地址:https://www.cnblogs.com/zyl-Tara/p/9685935.html
Copyright © 2011-2022 走看看