无论 URL 输入如何，都会显示 React 组件

Question

我正在学习使用 react-router-dom React 库的教程。

我遇到的问题是我的导航 header 显示，无论我在 localhost:3000 之后在地址栏中写哪个 URL，（例如 localhost:3000/dflkjfhdlkfjhdf 将实际上显示导航 header 而不是说它无效 URL)

index.js:

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

App.js:

function App() {
  return (
    <div>
      <MainNavigation />
      <Routes>
        <Route path="/" element={<AllMeetupsPage />} />
        <Route path="/new-meetup" element={<NewMeetupPage />} />
        <Route path="/favorites" element={<FavoritesPage />} />
      </Routes>
    </div>
  );
}

MainNavigation.js:

function MainNavigation() {
  return (
    <header className={classes.header}>
      <div className={classes.logo}> React Meetups </div>
      <nav>
        <ul>
          <li>
            <Link to="/">All Meetups</Link>
          </li>
          <li>
            <Link to="/new-meetup">Add New Meetup</Link>
          </li>
          <li>
            <Link to="/favorites">My Favorites</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}

包含所有必要的导入语句。

我认为问题可能出在 <MainNavigation /> 中 App() 函数中，该函数包含在 index.js.

中的 <BrowserRouter> 标记中

但是我不了解机制或如何防止这种情况发生（或者它是否重要，因为一旦我部署应用程序它可能不会发生）。

编辑：明确地说，我想要 App.js 中的 <MainNavigation /> 组件，因为我希望该组件显示在每个页面上，但可能不显示在 localhost:3000/dfkjldfkjh

Answer 1

问题似乎是你的应用程序没有做任何事情来“避免”URL 它不完全匹配的路径。对于像 "/dfkjldfkjh" 这样的路径，Routes 组件将检查匹配项，但不会找到任何匹配项，并且正确地不会 return 任何匹配的路由组件进行渲染。 MainNavigation 仍然会呈现，无论任何路由路径是否匹配。

然后解决方案是向您的应用程序添加重定向路由以处理任何“未知”路径并将应用程序重定向回已知的已处理路由。

<Route path="*" element={<Navigate to="/" replace />} />

Navigate

示例：

import { Routes, Route, Navigation } from 'react-router-dom';

function App() {
  return (
    <div>
      <MainNavigation />
      <Routes>
        <Route path="/" element={<AllMeetupsPage />} />
        <Route path="/new-meetup" element={<NewMeetupPage />} />
        <Route path="/favorites" element={<FavoritesPage />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </div>
  );
}

无论 URL 输入如何，都会显示 React 组件

React component displayed regardless of URL input

url

reactjs

react-router