react 路由 v5 路由跳转和路由嵌套

1. 路由环境配置

  1. 下载安装 react-router-dom v5 版本

如果当前 react-router-dom 版本 是 v6 的,需要卸载

npm uninstall react-router-dom

安装 v5 版本

npm install [email protected] -S
  1. 在入口 index.js 引入,并使用路由模式组件包裹根组件
    根据需求选择 HashRouter 还是 BrowserRouter,默认是 BrowserRouter
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);

拓展:

路由模式
hash 模式: HashRouter
histroy 模式: BrowserRouter
其中 hash 模式 url 路径上显示 # ,histroy 模式需要后端配合配置

2. 路由跳转的几种方式

1. Link、NavLink

在 App.js 中,通过 Link 或者 NavLink 组件,进行导航跳转

import React from "react";
import { Link, Route, Switch, Redirect } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App() {
  return (
    
{/* link 导航 */} {/* 也使用 NavLink,相比link 它多了一个点击时的 active 类,可以设置点击时样式 */} Link: go to child1 |{" "} Link: go to child2
{/* 定义路由出口 */} {/* 根组件默认展示,要添加 exact 属性,防止二次渲染 */} {/* */} {/* 路由重定向 */}
); } export default App;

2. this.props.history.push() 路由跳转

  1. 在函数组件中
    通过 withRoute 高阶组件,使得函数组件的参数 props 拥有 location、match、history 属性
    通过 props.history.push("路径") 的方式进行路由跳转
import React from "react";
import { Route, Switch, Redirect, withRouter } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";

function App(props) {
  return (
    
{/* 编程式导航导航 */}
{/* 定义路由出口 */} {/* 根组件默认展示,要添加 exact 属性,防止二次渲染 */} {/* */} {/* 路由重定向 */}
); } export default withRouter(App);
  1. 在类组件中
    在 Child1.js 中,类组件的 props 拥有 location、match、history 属性,通过 this.props.history.push("路径") 的方式进行路由跳转
import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";
import Child1A from "./Child1A";
import Child1B from "./Child1B";

export default class Child1 extends Component {
  render() {
    return (
      <>
        
); } }

3. this.props.history.replace() 路由跳转,清除历史记录

此方式跳转会删除历史记录,使用和传参方式和 this.props.history.push() 相同
Link组件也可以使用 replace 方式,只需要在Link标签上添加 replace 属性即可

this.props.history.replace("/child1/child1B");

4. this.props.history.go(num) 路由跳转,前进、后退

// 历史记录 前进
this.props.history.go(1)
// 或
this.props.history.goForward();

// 历史记录 后退
this.props.history.go(-1)
// 或
this.props.history.goBack();

// 历史记录 后退两步
this.props.history.go(-2)

3. 嵌套路由

  1. 配置一级路由结构
import React from "react";
import { Link, Route, Switch, Redirect } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App() {
  return (
    
{/* link 导航 */} {/* 也使用 NavLink,相比link 它多了一个点击时的 active 类,可以设置点击时样式 */} Link: go to child1 |{" "} Link: go to child2
{/* 定义路由出口 */} {/* 根组件默认展示,要添加 exact 属性,防止二次渲染 */} {/* */} {/* 路由重定向 */}
); } export default App;
  1. 配置子路由结构
    在 Child1.js 中,link,Route 标签中要写全路径
import React, { Component } from "react";
import { Link, Route, Switch } from "react-router-dom";
import Child1A from "./Child1A";
import Child1B from "./Child1B";

export default class Child1 extends Component {
  render() {
    return (
      <>
        
Link: go to child1A |{" "} Link: go to child1B
); } }

你可能感兴趣的:(react 路由 v5 路由跳转和路由嵌套)