只渲染 react-route 的第一页

Question

这是我第二次使用 stackflow，如果有些东西难以理解，很抱歉，我正在创建一个 React 项目，当我放置 Route 时，只呈现第一页，仅此而已，我的网站实际上是一个页面，只有一页不是关于页面。

应用程序.js

const App = () => {
 
  return (
    <>
      <Routes>
        <Route index path="/" element={<Home />} />
        <Route exact path="/Cardapio" element={<Cardapio />} />
        <Route exact path="/Knowmore" element={<Knowmore />} />
        <Route exact path="/About" element={<About />} />
        <Route path="*" element={<p>Página não encontrada</p>} />
      </Routes>   
    </>
  );
};
export default App;

Answer 1

试试这个

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
         <Route index element={<Home />} />
         <Route path="Cardapio" element={<Cardapio />} />
         <Route path="Knowmore" element={<Knowmore />} />
         <Route path="About" element={<About/>} />
         <Route path="*" element={<NoPage />} />
      </Routes>
    </BrowserRouter>
  );
}

如果它不起作用，请告诉我。 它可以与反应版本v17或v18相关

Answer 2

如果您想在同一条路径上一起渲染多个组件，则应将它们全部组合并合并到同一条路径上。

例子：

<Routes>
  <Route
    path="/"
    element={
      <>
        <Home />
        <Cardapio />
        <Knowmore />
      </>
    }
  />
  <Route path="/About" element={<About />} />
  <Route path="*" element={<p>Página não encontrada</p>} />
</Routes>

如果您想链接到各个组件，即 home、cardapio 并了解更多“部分”，则为它们分配适当的元素id属性并使用渲染的原始锚标记定位它们。

基本示例：

const Home = () => (
  <div id="home">
    Home
  </div>
);

const Cardapio = () => (
  <div id="cardapio">
    Cardapio
  </div>
);

const Knowmore = () => (
  <div id="knowmore">
    Knowmore
  </div>
);

App中的导航链接：

<nav>
  <ul>
    <li>
      <a href="#home">Home</a>
    </li>
    <li>
      <a href="#cardapio">Cardapio</a>
    </li>
    <li>
      <a href="#knowmore">Know More</a>
    </li>
    <li>
      <Link to="/about">About</Link>
    </li>
  </ul>
</nav>

Answer 3

尝试使用<BrowserRouter>标签包装内容。