react.js 中的嵌套路由没有给出预期的结果

Question

我想在单击 labCard.js 组件中的链接文本时显示自定义组件 Resource.js。使用 Outlet 挂钩时，Resource 组件显示在实验室 Card 中，并且 Body.js 组件未被替换。 Body.js组件是labCards组件的集合。我希望每当我在 labCard 组件上单击开始时显示资源组件而不是正文组件。

这是应用组件

import React from 'react'
import { Routes, Route } from 'react-router-dom'
import Navbar from './components/Navbar'
import Home from './components/Home'
import Body from './components/Body'
import AboutUs from './components/AboutUs'
import GetHelp from './components/GetHelp'
import Footer from './components/Footer'
import Resource from './subComponents/Resource'
import './App.css';

function App() {
  return (
    <div>
      <Navbar />
      <Routes>
        <Route path="/" element={ <Home /> } />
        <Route path="/body/*" element={ <Body /> } >
          <Route path="resource" element={ <Resource /> } />
        </Route>
        <Route path="/about" element={ <AboutUs /> } />
        <Route path="/help" element={ <GetHelp /> } />
      </Routes>
      <Footer />
    </div>
  );
}

export default App;

这是正文组件

import React from 'react'
import LabCard from '../subComponents/LabCard'
import { data } from '../data'
import './Body.css'

export default function Body() {
    const [labData, setLabData] = React.useState(data)
    let labCardElements = labData.map(lab => 
    <LabCard 
        key={lab.id} 
        labID={lab.id} 
        labType={lab.type}
        labTitle={lab.title} 
        labResourceUrl={lab.resourceUrl}
    />)
    return (
        <section className='experiment-body-section'>
            <h1 className='experiment-body--title'>Experiments</h1>
            <p className='experiment-body--description'>Here are all the experiments</p>
            <div className='experiment-body'>
                {labCardElements}
            </div>
        </section>
    )
}

这是 labCard 组件

import React from 'react'
import { Link } from 'react-router-dom'
import './Card.css'

export default function LabCard(props) {
    return (
        <div className='lab-card'>
            <p className='lab-card--id'>{props.labType}</p>
            <h2 className='lab-card--title'>{props.labTitle}</h2>
            <div className="parent">
                <div className='lab-card--overlay'></div>
                <Link to="resource" className='lab-card-overlay--button'>Begin</Link>
            </div>
        </div>
    )
}

Answer 1

如果我对你的 question/issue 的理解是正确的，那是你不想呈现 both Body 和 Resource 组件同时出现。

在这种情况下，您应该在嵌套索引路由上呈现 Body。默认情况下，两个嵌套路由都将在父路由上呈现为 Outlet。

<Route path="/body">
  <Route index element={<Body />} />               // <-- "/body"
  <Route path="resource" element={<Resource />} /> // <-- "/body/resource"
</Route>

react.js 中的嵌套路由没有给出预期的结果

Nested routing in react.js is not giving the desired results

javascript

reactjs

react-routing

react-router-dom

react-hooks