代码之家 › 专栏 › 技术社区 › Zoro0101

我已经开始学习在react中创建Routes,但我被一个代码所震惊,在这个代码中,主页的各种内容都不在一个组件中

react-router-dom react-router reactjs javascript

Zoro0101 · 技术社区 · 10 月前

正如我所说,我已经学习了一些路由的基础知识,但总有一条路径是定义的 "/" 对于home元素,而在我的例子中,主页的许多组件让我头疼。我尝试将它们包装在app.jsx中,然后将其用作主页,但两者都有 "http://localhost:5173" 和 "http://localhost:5173/about/" app.jsx正在渲染的位置相同。

app.jsx

import Navbar from "./components/Navbar";
import HeroSection from "./components/HeroSection";
import FeatureSection from "./components/FeatureSection";
import Workflow from "./components/Workflow";
import Footer from "./components/Footer";
import Pricing from "./components/Pricing";
import Testimonials from "./components/Testimonials";
import { Outlet } from 'react-router-dom';

const App = () => {
  return (
    <>
      <Navbar />
      <div className="max-w-7xl mx-auto pt-20 px-6">
        <HeroSection />
        <FeatureSection />
        <Workflow />
        <Pricing />
        <Testimonials />
        <Footer />
        <Outlet />
      </div>
    </>
  );
};

export default App;

main.jsx

import React, { Children } from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import App from "./App"
import About from './components/About'

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: '/about',
        element: <About />,
      }
    ]
  }
])

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

我希望按照所述创建动态路线

1 回复 | 直到 10 月前

Drew Reese 10 月前

问题是,您无条件地将“主页”内容呈现在所有嵌套子路由内容之上。

重构代码,将“主页”内容移动到实际的主页组件中,并在以下索引路径上呈现 App .

例子:

const Home = () => (
  <div className="max-w-7xl mx-auto pt-20 px-6">
    <HeroSection />
    <FeatureSection />
    <Workflow />
    <Pricing />
    <Testimonials />
  </div>
);

const App = () => {
  return (
    <>
      <Navbar />
      <Outlet />
      <Footer />
    </>
  );
};

import App from "./App"
import Home from './components/Home';
import About from './components/About';

const router = createBrowserRouter([
  {
    element: <App />,
    children: [
      { index: true, element: <Home /> }
      { path: '/about', element: <About /> }
    ]
  }
]);