主页 / 网络编程 /

无废话快速上手React路由开发

网络编程 2021-07-04 14:07www.168986.cn编程入门
本文以简洁为目标，帮助快速上手react-router-dom默认你接触过路由相关的开发，通过实例代码讲解的很详细，对React路由相关知识感兴趣的朋友一起看看吧

安装

输入以下命令进行安装：

// npm
npm install react-router-dom

// yarn
yarn add react-router-dom

react-router相关标签

react-router常用的组件有以下八个：

import { 
  BrowserRouter,
  HashRouter,
  Route,
  Redirect,
  Switch,
  Link,
  NavLink,
  withRouter,
} from 'react-router-dom'

简单路由跳转

实现一个简单的一级路由跳转

import { 
    BrowserRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        <Link to="/home" className="link">跳转Home页面</Link>
        <Link to="/about" className="link">跳转About页面</Link>
        <Route path="/home" ponent={Home}/>
        <Route path="/about" ponent={About}/>
      </Router>
    </div>
  );
}

export default App;

效果如下：

要点总结：

  • Route组件必须在Router组件内部
  • Link组件的to属性的值为点击后跳转的路径
  • Route组建的path属性是与Link标签的to属性匹配的; ponent属性表示Route组件匹配成功后渲染的组件对象

嵌套路由跳转

React 的路由匹配层级是有顺序的

例如，在 App 组件中，设置了两个路由组件的匹配路径，分别是 /home 和 /about，代码如下：

import { 
  BrowserRouter as Router, 
  Route, 
  Link,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {

  return (
    <div className="App">
      <Router>
        <Link to="/home">跳转Home页面</Link>
        <Link to="/about">跳转About页面</Link>

        <Route path="/home" ponent={Home}/>
        <Route path="/about" ponent={About}/>                           

      </Router>
    </div>
  );
}

export default App;

然后 Home 组件中同样也想设置两个路由组件的匹配路径，分别是 /home/one 和 /home/two，此时就可以看出，这个 /home/one 和 /home/two 为上一级路由 /home 的二级嵌套路由，代码如下：

import React from 'react'
import {
    Route,
    Link,
} from 'react-router-dom'
import One from './one'
import Two from './two'

function Home () {
    
    return (
        <>
            我是Home页面
            <Link to="/home/one">跳转到Home/one页面</Link>
            <Link to="/home/two">跳转到Home/two页面</Link>

            <Route path="/home/one" ponent={One}/>
            <Route path="/home/two" ponent={Two}/>
        </>
    )
}

export default Home

特别注意： Home 组件中的路由组件 One 的二级路由路径匹配必须要写 /home/one ，而不是 /one ，不要以为 One 组件看似在 Home 组件内就可以简写成 /one

动态链接

NavLink可以将当前处于active状态的链接附加一个active类名，例如：

import { 
    BrowserRouter as Router, 
    Route, 
    NavLink 
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        <NavLink to="/home" className="link">跳转Home页面</NavLink>
        <NavLink to="/about" className="link">跳转About页面</NavLink>
        <Route path="/home" ponent={Home}/>
        <Route path="/about" ponent={About}/>
      </Router>
    </div>
  );
}

export default App;
/* 设置active类的样式 */
.active {
    font-weight: blod;
    color: red;
}

效果如下：

路由匹配优化

当点击跳转链接时，会自动去尝试匹配所有的Route对应的路径，如图所示：

正常情况下，只需匹配到一个规则，渲染即可，即匹配成功一个后，无需进行后续的匹配尝试，此时可以用Switch组件，如下所示：

import { 
  BrowserRouter as Router, 
  Route, 
  NavLink,
  Switch,
} from 'react-router-dom'
import Home from './home'
import About from './about'

function App() {
  return (
    <div className="App">
      <Router>
        <NavLink to="/home" className="link">跳转Home页面</NavLink>   
        <NavLink to="/about" className="link">跳转About页面</NavLink>

        <Switch>
          <Route path="/home" ponent={Home}/>       
          <Route path="/about" ponent={About}/>      
          <Route path="/home" ponent={Home}/>       
          <Route path="/home" ponent={Home}/>        
          {/* 此处省略一万个Route组件 *
上一篇：js实现模拟购物商城案例 下一篇：react-diagram 序列化Json解读案例分析

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by