在 Netlify React 中重定向

在使用 Netlify 部署 React 应用时，经常需要进行页面重定向操作。这篇文章将介绍如何在 Netlify 中使用重定向。

1. 创建 _redirects 文件

在根目录下创建一个名为 _redirects 的文件，其内容如下：

/*  /index.html  200

这个文件告诉 Netlify，对于所有的请求都返回 index.html 并返回 200 状态码。

2. 安装 react-router-dom

在 React 应用中使用 react-router-dom 包来管理路由。

npm install react-router-dom --save

3. 编写路由

在 App.js 文件中编写路由。

import React from 'react';
import { BrowserRouter as Router, Link, Route, Switch } from "react-router-dom";
import Home from './pages/Home';
import About from './pages/About';

const App = () => {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

这个路由定义了两个页面，分别是 Home 和 About。

4. 部署到 Netlify

将应用部署到 Netlify 上，然后访问应用。可以按照路由进行页面跳转，重定向会被自动处理。