笔记--React 路由基础

最新推荐文章于 2024-09-27 15:55:31 发布

若梦丶忆流年

最新推荐文章于 2024-09-27 15:55:31 发布

阅读量130

点赞数 1

文章标签： react.js

本文链接：https://blog.csdn.net/qq_43488583/article/details/124013174

版权

本文详细介绍了React Router的基础用法，包括导入核心组件、创建组件、配置路由入口和出口。通过实例展示了如何进行编程式导航，如使用`history.push`进行页面跳转和`history.go(-1)`返回上一页。此外，还提及了默认路由的概念，以及模糊匹配和精确匹配的路由模式。

摘要由CSDN通过智能技术生成

1. React 路由介绍

在这里插入图片描述

2. 路由的基本使用

2.1 使用步骤

在这里插入图片描述

// 导入路由的三个核心组件：Router/Route/Link
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

// 创建组件
const First = () => <h1>页面一的内容</h1>;

// 使用Router组件包裹整个应用
class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <h1>我是一个大傻逼</h1>
          {/* 指定路由入口 */}
          <Link to="/first">页面一</Link>

          {/* 指定路由出口 */}
          <Route path="/first" component={First}></Route>
        </div>
      </Router>
    );
  }
}

// 渲染
ReactDOM.render(<App />, document.querySelector("#root"));

2.2 常见组件说明

在这里插入图片描述

3. 路由的执行过程

在这里插入图片描述

4. 编程式导航

在这里插入图片描述

// 导入
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

// 创建组件
class Login extends React.Component {
  handerLogin = () => {
    // 使用编程式导航
    this.props.history.push("/home");
  };
  render() {
    return (
      <div>
        <h1>登陆界面</h1>
        <button onClick={this.handerLogin}>登录</button>
      </div>
    );
  }
}

const Home = (props) => {
  const handerBack = () => {
    // go(-1)表示返回上一个页面
    props.history.go(-1);
  };
  return (
    <div>
      <h1>后台首页</h1>
      <button onClick={handerBack}>返回登陆页面</button>
    </div>
  );
};
// 默认组件
const Index = () => {
  return (
    <div>
      <h1>默认路由</h1>
    </div>
  );
};

const App = () => (
  <Router>
    <div>
      <p>编程式导航</p>
      <Link to="/login">去登陆页面</Link>

      {/* 制定路由规则 */}
      {/* 默认路由 */}
      <Route path="/" component={Index} />
      <Route path="/login" component={Login}></Route>
      <Route path="/home" component={Home}></Route>
    </div>
  </Router>
);

// 渲染
ReactDOM.render(<App />, document.getElementById("root"));