使用react-router v6，我需要一个导航栏永久存在，但无法在我的索引页面上同时显示 <App/> 和 <Home/>，​​如何修复？

Question

我正在使用 React 重建我的个人网站，并决定使用最新版本的 react-router-dom，我正在构建我的App组件来包含导航栏，然后在我想要显示的内容下面，例如Home或Projects。这在我的路线上工作得很好/projects，但我似乎无法弄清楚如何在索引路线上渲染App和。Home有办法吗？这是我到目前为止所拥有的：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Link, Route, Routes } from 'react-router-dom';
// N.B. Routes replaces Switch as of V6

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        // Using <App/> here keeps the navbar but doesn't display the homepage content
        <Route path="/" element={<App/>}>
        // But using <Home/> loses the navbar
        // Should I have my Navbar component in here somewhere or within the App?
          <Route path="projects" element={<Projects/>}/>
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

function App() {
  // Help?
}

function Navbar() {
  return (
    <header> // Very crude example as I'm self-answering, in production I'll rename the component to Header
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/projects">Projects</Link>
          </li>
        </ul>
      </nav>
    </header>
}

function Home() {
  return <h1>Home</h1>
}

function Projects() {
  return <h1>Projects</h1>
}

Answer 1

如果您按照 React-Router 6 的教程使用了该createBrowserRouter函数，并且不想更改为 using <BrowserRouter>，则可以进行以下转换：

开始

const router = createBrowserRouter([
    {
        path: "/", 
        element: <Root/>
    },
    {
        path: "/somePath", 
        element: <SomePath/>
    }
])

root.render(
    <div>
        <NavBar/>
        <RouterProvider router={router}/>
    </div>
)

导航栏显示错误useHref() may be used only in the context of a <Router> component

转换

重组您的createBrowserRouter对象，以便您有一个带有导航栏组件的路径“/”和一个<Outlet/>.

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

const router = createBrowserRouter([
    {
        path: "/", 
        element: <NavbarWrapper/>
        children:[
             {
                 path: "/", // yes, again
                 element: <Root/>
             },
             {
                 path: "/somePath",
                 element: <SomePath/>
             },
        ]
    }
])

const function NavbarWrapper(){
    return (
    <div>
        <Navbar/>
        <Outlet/>
    </div>
    )
};

Answer 2

应用程序可以无条件渲染Navbar，并将Routes组件和路由移动到App。索引文件呈现App到BrowserRouter.

应用程序

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home/>}>
        <Route path="projects" element={<Projects/>}/>
      </Routes>
    </>
  );
}

索引.js

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 3

首先，您的App组件如下所示：

function App() {
  return (
    <div className="App">
      <Navbar/>
      <main> // You don't *have* to wrap the Outlet in a main tag, but I am doing, to save having to remember to do it in each component
        <Outlet/>
      </main>
    </div>
  )
}

这样，现在您App始终显示 ，Navbar并且出口将显示路线告诉它的任何页面。

好吧，这很好，但它仍然意味着App当我想要渲染Home并仍然保留导航栏时进行渲染，这真的能解决这个问题吗？

好吧，不是靠它自己。首先将该 Outlet 组件添加到您的 import from 中react-router-dom，否则我们将一事无成！

现在像这样调整你的路由：

import { BrowserRouter, Link, Outlet, Route, Routes } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App/>}>
          <Route index element={<Home/>}/>
          <Route path="projects" element={<Projects/>}/>
        </Route>
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

看看Route带有Home组件的标签是如何带有index标签的吗？就是这样，这就是解决方案！现在，您的应用程序将按其应有的方式呈现，包括导航栏，并且它Outlet会呈现Home索引路线上的元素。