22.React路由使用

目录

安装

核心组件

HashRouter: 路由容器组件

BrowserRouter: 路由容器组件

Route: 路由规则组件(同时可以充当路由占位符)

Redirect: 路由重定向组件

Switch: 避免路由重复匹配

Link: 普通路由链接

综合使用:


安装

npm i react-router-dom

核心组件

HashRouter: 路由容器组件

  • 使用: 将所有和路由相关的组件包裹起来
  • 作用: 给我们提供了带#的路由模式
import {HashRouter} from 'react-router-dom';

//使用
<HashRouter>
    
</HashRouter>

BrowserRouter: 路由容器组件

  • 使用: 将所有和路由相关的组件包裹起来
  • 作用: 给我们提供了不带#的路由模式
import {BrowserRouter} from 'react-router-dom';

//使用
<BrowserRouter>
  
</BrowserRouter>

Route: 路由规则组件(同时可以充当路由占位符)

  • 作用: 配置路由规则

        属性

  • exact: 启用路由严格匹配模式
  • path:  指定页面跳转地址
  • component: 指定页面组件对象
import {Route} from 'react-router-dom';

<Route path=""  component={}/>
 
 
  • 作用: 创建导航链接

        属性:

  • exact: 启用路由严格匹配模式
  • to: 指定页面跳转地址
import {NavLink} from 'react-router-dom';
使用:

<NavLink to="">导航文字</NavLink>

Redirect: 路由重定向组件

       属性

  • path: 访问的页面地址
  • to: 重定向之后的页面地址
import {Redirect} from 'react-router-dom';

<Route path="" >
    <Redirect to=""/>
</Route>

<Redirect path="" to=""/>

Switch: 避免路由重复匹配

  • 用法: 将路由规则组件Route包裹起来
  • import {Switch} from 'react-router-dom';
    
    <Switch>
    	  <Route path="" component={}/>
        <Route path="" component={}/>
    </Switch>

Link: 普通路由链接

  • (系统不会在其生成元素之上添加路由导航高亮选择器)
  • 作用: 创建一个普通的路由链接
  • 用法
mport {Link} from 'react-router-dom';

//使用:

<Link to="">链接地址</Link>

综合使用:

class App extends React.Component {
  render() {
    return <BrowserRouter>
      {/* 配置路由规则 */}
      {/* 路由重定向 */}
      <Switch>
        {/* <Route path="/" >
        <Redirect to="/home"/>
      </Route> */}
        {/* <Redirect path="/" to="/cart" /> */}
        {/* 启用路由严格匹配模式 */}
        <Route exact path="/" component={Home} />
        <Route path="/home" component={Home} />
        <Route path="/cate" component={Cate} />
        <Route path="/cart" component={Cart} />
        <Route path="/ucenter" component={Ucenter} />
        {/* 动态路由规则 */}
        <Route path="/goods/:id/:goodsname/:price" component={Goods} />
        {/* 404路由规则 */}
        <Route path="*" component={NotFound} />
      </Switch>
      {/* 路由导航链接 */}
      <div className="tabbar">
        <NavLink exact to="/">商城首页</NavLink>
        <NavLink to="/home">首页</NavLink>
        <NavLink to="/cate">商品分类</NavLink>
        <NavLink to="/cart">购物车</NavLink>
        <NavLink to="/ucenter">会员中心</NavLink>
      </div>
    </BrowserRouter>
  }
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

二十四Q

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值