<Router basename=\"/SnapScout\"> 无法匹配 URL \"/\" 因为它不是以 basename 开头的，所以 <Router> 不会呈现任何内容

Question

我在 React 上遇到错误： 无法匹配 URL“/”，因为它不是以基本名称开头的，因此不会呈现任何内容。

我的 App.js 文件是：

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

class App extends Component {
  // Prevent page reload, clear input, set URL and push history on submit
  handleSubmit = (e, history, searchInput) => {
    e.preventDefault();
    e.currentTarget.reset();
    let url = `/search/${searchInput}`;
    history.push(url);
  };

  render() {
    return (
      <PhotoContextProvider>
        <HashRouter basename="/SnapScout">
          <div className="container">
            <Route
              render={(props) => (
                <Header
                  handleSubmit={this.handleSubmit}
                  history={props.history}
                />
              )}
            />
            <Routes>
              <Route
                exact
                path="/"
                render={() => <Navigate to="/mountain" />}
              />

              <Route
                path="/mountain"
                render={() => <Item searchTerm="mountain" />}
              />
              <Route path="/beach" render={() => <Item searchTerm="beach" />} />
              <Route path="/bird" render={() => <Item searchTerm="bird" />} />
              <Route path="/food" render={() => <Item searchTerm="food" />} />
              <Route
                path="/search/:searchInput"
                render={(props) => (
                  <Search searchTerm={props.match.params.searchInput} />
                )}
              />
              <Route element={NotFound} />
            </Routes>
          </div>
        </HashRouter>
      </PhotoContextProvider>
    );
  }
}

export default App;

我试图改变但没有效果，仍然得到一个带有错误的平面白屏：无法匹配 URL“/”，因为它不是以基本名称开头，所以不会呈现任何内容。

Answer 1

在提供的代码 sn-p 中，您混合了 react-router-dom@5 和 react-router-dom@6 导出以及 Route 组件 API/语法。

在react-router-dom@6：

1. 不再有任何路线道具（例如match、history和location).任何需要访问“旧路由道具”的组件都需要使用新的 React 钩子，即

   • useParams为match.params
   • useLocation为location
   • useNavigate 用于 navigate 功能（而不是history对象)

2. Route 组件不接受任何 component 或 children 或 render 函数属性，它取而代之的是使用一个 element 属性和一个 React.ReactNode，又名 JSX。

   App 组件的重构可能如下所示：

   import {
     Route,
     Routes,
     Navigate,
     useNavigate,
     useParams
   } from "react-router-dom";
   
   const App = () => {
     const navigate = useNavigate();
   
     // Prevent page reload, clear input, set URL and push history on submit
     const handleSubmit = (e, searchInput) => {
       e.preventDefault();
       e.currentTarget.reset();
       const url = `/search/${searchInput}`;
       navigate(url);
     };
   
     return (
       <PhotoContextProvider>
         <div className="container">
           <Header handleSubmit={handleSubmit} />
           <Routes>
             <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" />} />
             <Route path="/search/:searchInput" element={<Search />} />
             <Route element={<NotFound />} />
           </Routes>
         </div>
       </PhotoContextProvider>
     );
   };
   

   索引.js

   import { StrictMode } from "react";
   import { createRoot } from "react-dom/client";
   import { HashRouter as Router } from "react-router-dom";
   import App from "./App";
   
   const rootElement = document.getElementById("root");
   const root = createRoot(rootElement);
   
   root.render(
     <StrictMode>
       <Router basename="/SnapScout">
         <App />
       </Router>
     </StrictMode>
   );
   

   请注意，HashRouter 已被移动向上ReactTree 允许 App 组件使用和访问路由上下文，因此可以使用 useNavigate 挂钩。

   运行应用程序并导航至"/#/SnapScout"