首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React路由器文档和重定向与history.push()

React Router 是一个用于在 React 应用程序中实现导航和路由功能的库

安装

首先,确保已经安装了 react-router-dom

代码语言:javascript
复制
npm install react-router-dom

基本用法

要在应用程序中使用 React Router,请在项目的入口文件中引入 BrowserRouter 组件,并将其包装在应用程序的根组件外部:

代码语言:javascript
复制
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

路由定义

App 组件中,使用 Route 组件定义路由规则:

代码语言:javascript
复制
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  );
}

export default App;

重定向

要实现重定向,可以使用 Redirect 组件。例如,当用户访问 /old-path 时,将其重定向到 /new-path

代码语言:javascript
复制
import React from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';

function App() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Redirect from="/old-path" to="/new-path" />
    </Switch>
  );
}

export default App;

history.push()

history.push() 是一个用于导航到新页面的方法。它可以在组件内部调用,也可以在事件处理程序中调用。例如,当用户点击按钮时,导航到 /about 页面:

代码语言:javascript
复制
import React from 'react';
import { useHistory } from 'react-router-dom';

function Home() {
  const history = useHistory();

  const handleClick = () => {
    history.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

export default Home;
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

7分39秒

React基础 虚拟DOM和JSX 4 虚拟DOM与真实DOM 学习猿地

23分54秒

React基础 事件与表单数据 4 高阶函数和函数柯里化 学习猿地

2分37秒

Golang 开源 Excelize 基础库教程 1.1 Excelize 简介

3.1K
7分25秒

Golang 开源 Excelize 基础库教程 1.2 Go 语言开发环境搭建与安装

2K
11分37秒

Golang 开源 Excelize 基础库教程 2.1 单元格赋值、样式设置与图片图表的综合应用

390
13分24秒

Golang 开源 Excelize 基础库教程 2.3 CSV 转 XLSX、行高列宽和富文本设置

1.5K
9分1秒

Golang 开源 Excelize 基础库教程 2.5 迷你图、页眉页脚、隐藏与保护工作表

357
7分34秒

Golang 开源 Excelize 基础库教程 3.1 流式生成包含大规模数据的电子表格文档

2.1K
9分33秒

Golang 开源 Excelize 基础库教程 1.3 基本概念

1.3K
6分12秒

Golang 开源 Excelize 基础库教程 2.2 条件格式、批注和数据验证设置

396
8分28秒

Golang 开源 Excelize 基础库教程 2.4 数据透视表、形状、公式和文档属性设置

2.2K
8分15秒

Golang 开源 Excelize 基础库教程 2.6 读取工作簿、工作表、图片与公式计算

1.3K
领券