javascript 在react路由器dom中只有一个组件正在加载，其余组件都没有加载

5uzkadbs 于 2023-06-20 发布在 Java

关注(0)|答案(3)|浏览(205)

在我的主页<Headline/>程序中只有一个组件正在显示，其余的都没有。代码如下：

import React from 'react'
import Navbar from './components/Navbar';
import About from './components/About';
import Headline from './components/Headline';
import Dishes from './components/Dishes';
import Investor from './components/Investor';
import Customer  from './components/Customer';
import Order  from './components/Order';
import Footer  from './components/Footer';
import './style.css';
import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>  
        <Route exact path='/' element={<Headline />}></Route>
        <Route exact path='/' element={<Dishes />}></Route>
        <Route exact path='/' element={<Investor />}></Route>
        <Route exact path='/' element={<Customer />}></Route>
        <Route exact path='/' element={<Order />}></Route>
        <Route exact path='/' element={<Footer />}></Route>  
        <Route exact path='/about'  element={<About />}></Route>
      </Routes>
    </Router>
  );
}

export default App;

我试过所有的组件都应该在主页上用'path=/'加载，但只有一个组件正在加载，其余的都没有。

JavaScript

来源：https://stackoverflow.com/questions/76509748/there-is-only-one-component-is-loading-in-react-router-dom-and-rest-are-not

3条答案

按热度按时间

z9zf31ra1#

代码段中没有主页组件。每个Routes组件的每个路径也只能有一个Route，这就是为什么只匹配和渲染第一个路由渲染Headline的原因。
如果你想同时呈现"/"路径上的所有组件，那么把它们都放在一个JSX文本中，在"/"上有一个路由。
示例：

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>  
        <Route
          path='/'
          element={(
            <>
              <Headline />
              <Dishes />
              <Investor />
              <Customer />
              <Order />
              <Footer />
            </>
          )}
        />
        <Route path='/about' element={<About />} />
      </Routes>
    </Router>
  );
}

当然，您也可以将这些“主页”组件重构为一个独立的组件。

const Home = () => (
  <>
    <Headline />
    <Dishes />
    <Investor />
    <Customer />
    <Order />
    <Footer />
  </>
);

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>  
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </Router>
  );
}

赞(0）回复(0）举报 2023-06-20

zphenhs42#

尝试将所有组件 Package 在一个单独的组件中，然后

<Route  exact path='/' element={<Home/>}></Route>
<Route exact path='/about'  element={<About/>}></Route>

赞(0）回复(0）举报 2023-06-20

lhcgjxsq3#

在您的代码中，您有多个组件，其中exact prop设置为true，path prop设置为'/'。精确属性意味着只有当位置与路径完全相同时，路由才会匹配。由于有多个路径相同的路由，因此将只渲染第一个匹配的路由。
要在同一管线下渲染多个零部件，可以将零部件嵌套在父零部件中。可以按如下方式修改代码：

function App() {
  return (
    <Router>
     <Navbar />
     <Routes>  
      <Route path='/' element={<Home />}></Route>
      <Route path='/about' element={<About />}></Route>
     </Routes>
    </Router>
  );
}

function Home() {
  return (
    <>
     <Headline />
     <Dishes />
     <Investor />
     <Customer />
     <Order />
     <Footer />
    </>
  );
}

在这个更新的代码中，我们创建了一个名为Home的新组件，它表示主页。在Home中，我们呈现您想要在主页上显示的所有组件。通过将它们嵌套在“主页”中，当路径匹配“/”时，它们将一起呈现。
请注意，在此场景中，Route组件不需要确切的prop，因为我们将组件嵌套在父路由中。

赞(0）回复(0）举报 2023-06-20

我来回答

javascript 在react路由器dom中只有一个组件正在加载，其余组件都没有加载

3条答案

相关问题

热门标签

最新问答