React-Router知识点


路由的分类
  • 页面路由
window.location.href = 'http://www.baidu.com';
history.back();// 路由后退
  • hash 路由
window.location = '#hash';
window.onhashchange = function(){
    console.log(window.location.hash)
}
  • h5路由
history.pushState('name','title','/path');//  推进一个状态
history.replaceState('name','title','/path'); //  替换一个状态
window.onpopstate = function() {
    console.log(window.location.href); //  获取整个URL字符串
    console.log(window.location.pathname); //    URL 的路径部分(就是文件地址)
    console.log(window.location.hash); //   查询(参数)部分
    console.log(window.location.search); //  锚点hash值
}

react路由 react-router-dom
  • 路由方式
    <BrowserRouter>h5路由 ,需要后端进行配置
    <HashRouter>hash路由,
  • 路由规则
    <Route>
    <Route path="/home" exact component={Home}></Route>
    ( exact ) 为纵向匹配 如果是嵌套路由则不可用
  • 路由选项
    <Switch>,可以解决路由的多次匹配,为横向匹配
  • 跳转导航
    <Link/>,路由的跳转类似a标签
    <NavLink>,在Link的基础上增加了一些选中状态,一般用作导航菜单
    <NavLink to='/home' activeClassName="selected"></NavLink>
    路由切换TAB选中样式 也可activeStyle={{color:'red'}} 直接添加样式
  • 自动跳转
    <Redirect to='/' />路由重定向 一般配合Switch使用

路由参数的获取
<Link  to='/home/123'/> //  传递参数
<Route path="/home/:id" component={Home}></Route>//  定义参数名称
this.props.match.params.id  //  在Home组件中接受数据
多条路由匹配
<Link to="/a">不带参数,组件A</Link>
<Link to="/a/123">带参数,组件A</Link>
<Link to="/a/sub">组件A下的sub 组件</Link>
<Switch>
   <Route exact path={`${this,props.match.path}`} render ={(route) => {
        return <div>当前组件是不带参数的组件A</div>
    }}/> // exact为完全匹配,只会匹配  /a
   <Route path={`${this,props.match.path}/sub`} render ={(route) => {
        return <div>当前组件是组件A下的sub组件</div>
    }}/> // Switch会将第一个匹配到的路由返回,而不会继续向下匹配
   <Route path={`${this,props.match.path}/:id`} render ={(route) => {
        return <div>当前组件是带参数的组件A,参数是{route.match.params.id}</div>
    }}/>//  一般都是将通配路由放在最后面
</Switch>



©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的。它也分...
    IT老马阅读 58,957评论 0 49
  • React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件。所...
    梁相辉阅读 97,657评论 24 195
  • 安装 示例 容器组件 react-router的容器组件,就是最外层包括所有路由的组件,所有路由活动需要在容器组件...
    Mr无愧于心阅读 1,630评论 0 1
  • <BrowserRouter> 使用 HTML5 提供的 history API (pushState, repl...
    强子_30fd阅读 87,706评论 0 59
  • 慢慢的,你会发现没有什么人能够永驻身旁,没有什么事是无法忘记。我们没有办法去抱怨什么,去指责什么,我们只能被动...
    真的是阿温啊阅读 317评论 0 2