React中HashRouter basename匹配失败导致路由不渲染问题求助

问题分析 #

你遇到的核心问题有两个：

1. 设置了HashRouter的basename="/SnapScout"，但当前访问URL未包含该前缀，导致路由无法匹配任何路径，页面空白。
2. 代码混用了react-router-dom v5与v6的API（如render属性、exact、history.push），这是路由失效的关键诱因。

解决方案 #

1. 统一使用react-router-dom v6 API #

v6彻底废弃了v5的部分API，需按以下规则调整：

• 所有路由必须嵌套在Routes组件内
• Route组件用element属性传递渲染内容，替代原render属性
• 导航逻辑改用useNavigate钩子（类组件需通过withRouter包装）
• 404页面需设置path="*"作为通配符路由

2. 调整basename与路由匹配逻辑 #

设置basename="/SnapScout"后，实际访问URL应为/#/SnapScout/（HashRouter自动添加#），路由路径会自动基于basename前缀匹配。

修改后的完整代码 #

import React, { Component } from "react";
import PhotoContextProvider from "./context/PhotoContext";
import { HashRouter, Route, Routes, Navigate, withRouter } from "react-router-dom";
import Header from "./components/Header";
import Item from "./components/Item";
import Search from "./components/Search";
import NotFound from "./components/NotFound";

// 用withRouter包装Header，让类组件能获取导航函数
const HeaderWithRouter = withRouter(Header);

class App extends Component {
  handleSubmit = (e, navigate, searchInput) => {
    e.preventDefault();
    e.currentTarget.reset();
    // 直接使用navigate，basename会自动添加到路径前
    navigate(`/search/${searchInput}`);
  };

  render() {
    return (
      <PhotoContextProvider>
        <HashRouter basename="/SnapScout">
          <div className="container">
            {/* 直接渲染全局Header，传递处理函数 */}
            <HeaderWithRouter handleSubmit={this.handleSubmit} />
            <Routes>
              {/* 根路径重定向到/mountain */}
              <Route path="/" element={<Navigate to="/mountain" />} />
              <Route path="/mountain" element={<Item searchTerm="mountain" />} />
              <Route path="/beach" element={<Item searchTerm="beach" />} />
              <Route path="/bird" element={<Item searchTerm="bird" />} />
              <Route path="/food" element={<Item searchTerm="food" />} />
              {/* 动态路由通过useParams获取参数 */}
              <Route path="/search/:searchInput" element={<Search />} />
              {/* 通配符路由匹配所有未定义路径 */}
              <Route path="*" element={<NotFound />} />
            </Routes>
          </div>
        </HashRouter>
      </PhotoContextProvider>
    );
  }
}

export default App;

配套调整Search组件 #

原props.match.params在v6中不再可用，需将Search改为函数组件，用useParams获取动态参数：

import { useParams } from "react-router-dom";

function Search() {
  const { searchInput } = useParams();
  return <div>搜索关键词：{searchInput}</div>;
}

export default Search;

访问路径说明 #

设置basename="/SnapScout"后，需访问以下格式的URL：
http://你的域名/#/SnapScout/
路由会自动重定向到http://你的域名/#/SnapScout/mountain

若希望直接访问根路径（/）也能正常匹配，可移除basename="/SnapScout"配置，或确保部署环境的URL前缀为/SnapScout。

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