22.React路由使用

最新推荐文章于 2023-08-18 10:25:48 发布

二十四Q

最新推荐文章于 2023-08-18 10:25:48 发布

阅读量700

点赞数

文章标签： jsx react

本文链接：https://blog.csdn.net/qq_44914734/article/details/121679663

版权

安装

核心组件

HashRouter: 路由容器组件

BrowserRouter: 路由容器组件

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

安装

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={}/>

NavLink: 路由导航组件

作用: 创建导航链接

属性:

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>
  }
}