如何将/gallery根路径重定向到/projects，同时保留子路由访问？

直接修改你的路由配置即可，核心是拆分/gallery的路由规则，区分根路径和子路径：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import Footer from './components/Footer';
import NavMenu from './components/NavMenu';
import ScrollToTop from './components/ScrollToTop';
import About from './pages/About';
import Contact from './pages/Contact';
import Home from './pages/Home';
import Projects from './pages/Projects';
import Gallery from './pages/Gallery';


export default function App() {
  return (
    <>
      <Router>
        <NavMenu />
        <ScrollToTop />
        <Switch>
          <Route path="/about">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
          <Route path="/projects">
            <Projects />
          </Route>
          {/* 精确匹配/gallery根路径，触发重定向 */}
          <Route path="/gallery" exact>
            <Redirect to="/projects" />
          </Route>
          {/* 匹配/gallery下所有子路径，渲染Gallery页面 */}
          <Route path="/gallery/:subpath*">
            <Gallery />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
        <Footer />
      </Router>
    </>
  );
}

关键说明： #

• 精确匹配：给/gallery路由加上exact属性，确保只有访问example.com/gallery（或example.com/gallery/，React Router会自动处理末尾斜杠）时才会重定向到/projects
• 子路径匹配：/gallery/:subpath*中的:subpath*是通配符规则，会匹配所有/gallery/photo1、/gallery/album/photo2这类带子路径的地址，让Gallery组件正常渲染
• 路由顺序：必须把精确匹配的/gallery路由放在子路径匹配路由的前面，因为Switch组件会按顺序匹配第一个符合条件的路由，顺序错了会导致重定向失效

内容的提问来源于stack exchange，提问作者Tontito