React-使用USEATICE根据URL显示特定内容

Question

试图教自己反应并陷入困境...我似乎无法使用USELOCATION（）（）基于URL来显示特定页面的内容 - 帮助！

app.js-路由器显示页面点击，是的！

    <Router>
        <Routes>
            <Route exact path="/" element={<Home />} />
            <Route path="/project/projectOne" element={<Project />} />
            <Route path="/project/projectTwo" element={<Project />} />
        </Routes>
    </Router>

project.js-项目模板按预期的projectIntro.js提供组件

const Project = () => {
return (
    <div className='content-wrapper'>
        <Scroll />
        <ProjectIntro />
        <ProjectContent />
        <ProjectGrid />
        <Contact />
    </div>
); }; export default Project;

- 一个试图为内容提供服务的组件 - 这是我所困的，uselocation（）请参见“ the the the Path”，但我不知道该如何根据该路径显示“ ProjectIntrodeTails”。

const projectOne = () => {
  <h1 className='project-intro-heading'>Title Here</h1>,
  <figure className='project-intro-image'>
    <img src={projectImage} alt='placeholder'/>
  </figure> 
}

const projectTwo = () => {
    <h1 className='project-intro-heading'>Title Here</h1>,
    <figure className='project-intro-image'>
        <img src={projectTwoImage} alt='placeholder' />
    </figure>
}


const projectIntroDetails = {
    projectOne: {
        component: <projectOne />
    },
    projectTwo: {
        component: <projectTwo />
    }
}

const ProjectIntro = () => {
    const projectPath = useLocation();
    console.log(projectPath);

    // this is where I need help
    // how do I turn the path into seeing details to render the correct content?
    const projectIntroDetail = projectIntroDetails[projectPath.pathname.split("/project/")];

    return (
        <div className='project-intro'>
            {projectIntroDetail}
        </div>
    );

}; export default ProjectIntro;

Answer 1

您可以使用带有开关语句的组件来确定要渲染的子组件。此方法使您可以将任何其他道具传递给儿童组件。

如果您不需要＆lt; div className ='project-intro'＆gt;元素，则还可以直接在projectintro component中直接渲染开关。

const ProjectOne = () => {
  <h1 className='project-intro-heading'>Title Here</h1>,
  <figure className='project-intro-image'>
    <img src={projectImage} alt='placeholder'/>
  </figure> 
}

const ProjectTwo = () => {
    <h1 className='project-intro-heading'>Title Here</h1>,
    <figure className='project-intro-image'>
        <img src={projectTwoImage} alt='placeholder' />
    </figure>
}

const ProjectIntros = ({ slug, ...props }) => {
    switch(slug) {
        case 'projectOne':
            return <ProjectOne {...props} />;
        case 'projectTwo':
            return <ProjectTwo {...props} />;
        default:
            return null;
    }
}

const ProjectIntro = () => {
    const projectPath = useLocation();
    console.log(projectPath);

    return (
        <div className='project-intro'>
            <ProjectIntros slug={projectPath.pathname.split("/")[2]} />
        </div>
    );

}; export default ProjectIntro;

Answer 2

您实际上不需要使用USELocation挂钩或PATHNAME值来处理任何条件渲染逻辑，这就是路由组件的目的。

我建议将正确的子项目组件作为要在正确匹配的路线上渲染的道具，或者以更“反应路由器”方式进行操作的路由。

将组件降低为Prop示例：

<Router>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route
      path="/project/projectOne"
      element={<Project projectIntro={<ProjectOne />} />}
    />
    <Route
      path="/project/projectTwo"
      element={<Project projectIntro={<ProjectTwo />} />}
    />
  </Routes>
</Router>

应用

const Project = ({ projectIntro }) => {
  return (
    <div className='content-wrapper'>
      <Scroll />
      <div className='project-intro'>
        {projectIntro}
      </div>
      <ProjectContent />
      <ProjectGrid />
      <Contact />
    </div>
  );
};

React-Router-dom 为您的优势。

项目

转换项目进入布局组件，并渲染projectOne和projecttwo nested路线上的组件。布局路由旨在用于共享常见的UI元素和布局，并将路由内容渲染到插座中。

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

const Project = () => {
  return (
    <div className='content-wrapper'>
      <Scroll />
      <div className='project-intro'>
        <Outlet /> // <-- render nested routes here
      </div>
      <ProjectContent />
      <ProjectGrid />
      <Contact />
    </div>
  );
};

应用程序

<Router>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/project" element={<Project />}>
      <Route path="projectOne" element={<ProjectOne />} />
      <Route path="projectTwo" element={<ProjectTwo />} />
    </Route>
  </Routes>
</Router>