目录
安装
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>
}
}