react-routerの基本的な使用法
1.最初のステップはもちろんインストールです。
- npmを使用してインストールします
npm Install react-router-dom
- 糸を使用してインストールします
yarn add react-router-dom
2. 2番目のステップは、インポートすることです。
// 有两种url格式: BroswerRouter, 原型为h5的history模式, 路径中不带有`#`
// HashRouter ,使用hash模式, 路径中带有 `#`, 两者比较常用BroswerRouter.
import {
BroswerRouter as Router, Route, Link, NavLink } from 'react-router-dom'
- ヒント：使用
BroswerRouterのパスをより簡潔に見え、そしてより多くのURLのような。vueでrouter、設定mode: ‘history’と同じ（特に偉大な勧告を！）
3.3番目のステップは使用です。
- ルーター、ルーター、リンクの使用：
import React, {
Component } from 'react';
import {
BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';
export default class App extends React.Component {
render() {
return (
<BrowserRouter>
<Link to="/">首页</Link>
<Link to="/about">关于</Link>
<Link to="/profile">我的</Link>
// exact为精准配置, 只有路径完全一致, 才会跳转.
<Route exact path="/" component={
Home} />
<Route path="/about" component={
About} />
<Route path="/profile" component={
Profile} />
</BrowserRouter>
)
}
}
ヒント：ルータが含まれていますLink、RouteこれはLink、パスを表しRoute、パスに対応するコンポーネントを表しので、その上でクリックすることによりLink、対応するページにジャンプ。
- ルーター、ルート、NavLinkの使用：
import React, {
Component } from 'react';
import {
BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';
export default class App extends React.Component {
render() {
return (
<BrowserRouter>
<NavLink to="/" activeStyle={
{
color: "red"}}>首页</NavLink>
<NavLink to="/about" activeStyle={
{
color: "red"}}>关于</NavLink>
<NavLink to="/profile" activeStyle={
{
color: "red"}}>我的</NavLink>
// exact为精准配置, 只有路径完全一致, 才会跳转.
<Route exact path="/" component={
Home} />
<Route path="/about" component={
About} />
<Route path="/profile" component={
Profile} />
</BrowserRouter>
)
}
}
ヒント：多くの属性NavLinkと比較しLinkてactiveClassName、activeStyleNavLinkのデフォルトのアクティブ化されたクラスはactiveです。混乱を恐れている場合は、カスタムクラス名を使用できます。
<NavLink to="/" activeStyle={
{
color: "red"}} activeClassName='link-active'>首页</NavLink>
ヒント：アクティブなパス検出をクリックした場合は、正確に一致させるために/ルートをroute追加する必要がありますexact。
- スイッチ、ルーター、ルート、
import React, {
Component } from 'react';
import {
BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';
export default class App extends React.Component {
render() {
return (
<BrowserRouter>
<NavLink to="/" activeStyle={
{
color: "red"}}>首页</NavLink>
<NavLink to="/about" activeStyle={
{
color: "red"}}>关于</NavLink>
<NavLink to="/profile" activeStyle={
{
color: "red"}}>我的</NavLink>
<Switch>
// 加上switch后, 匹配到第一个后, 就不会往后配置, 这样就不会出现, 有路径在其中就被渲染.
<Route exact path="/" component={
Home} />
<Route path="/about" component={
About} />
<Route path="/profile" component={
Profile} />
</Switch>
</BrowserRouter>
)
}
}
ヒント：Switchタグを追加Routeして、1つだけに一致させRouteます。
Redirect使用法：
user.info ? show(userInfo): <Redirect to: '/login'>
ヒント：ユーザー情報がある場合は直接ログインします。それ以外の場合は、ログインページにジャンプしてログインします。
多层路由：
// 挑战到cart购物车下的shopInfo商品信息页面
<Route path="/cart/shopInfo" component={
About} />
编程式路由：
// 页面中的跳转点击函数
<button onClick= {
this.toCart}>跳转到购物车</button>
// 函数中的跳转点击函数定义
toCart() {
// 这是跳转到cart, 保留当前页.
this.props.history.push('/cart')
//这是替换为cart, 当前页被cart替换了.
this.props.history.replace('/cart')
}