时间戳

首页 > 解决方案 > URL 正在更新，但组件未显示

reactjs - URL 正在更新，但组件未显示

问题描述

我已经为此苦苦思索了大约 2 周了。我完全超出了我的深度，我觉得每次尝试都应该放弃，但我在这里，向前推进！

我在我的 App 组件中创建了一个 Route，它运行良好，看起来像这样 -

function App() {

  const location = useLocation();

  return (

    <div className="App">
      <Navigation />
      <Copyright />
      <Button linkTo="/hire" btnText="Hire me" /> 

      <div className="page-wrap flex_center">
        <AnimatePresence exitBeforeEnter initial={false}>
          <Switch location={location} key={location.pathname}>
            <Route path="/projects" exact component={Projects}/>
            <Route path="/hire" exact component={Hire}/>
            <Route path="/about" exact component={About}/>
            <Route path="/" exact key="/" component={Home}/>
          </Switch>
        </AnimatePresence>
      </div>
    </div>
  )
}

export default App;

在项目组件中，我想显示一个链接列表，然后根据一些对象数据显示内容（会有多个项目，项目的数量会定期变化）

这是项目组件 -

const Projects = () => {

  const location = useLocation();

  const ProjectData = [
    {
      id: "project-one",
      name: "Project 1",
      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie.",
    },
    {
      id: "project-two",
      name: "Project 2",
      description: "Mauris finibus, massa eu tempor volutpat, magna dolor euismod dolor.",
    },
  ];

  const { url } = useRouteMatch();
  const linkList = ProjectData.map((project) => {

    return (
      <li key={project.id}>
        <Link to={`${url}/${project.id}`}>{project.name}</Link>
      </li>
    );
    
  });

  return (

    <Switch location={location} key={location.pathname}>
      <Route path={`${url}/:projectId`}>
          <Project data={ProjectData} />
      </Route>
      <Route exact path={url}>
        <ul>{linkList}</ul>
      </Route>
    </Switch>

  );
};

export default Projects;

最后一部分是处理数据的项目组件

const Project = ({ data }) => {

  const { projectId } = useParams();
  const project = data.find(p => p.id === String(projectId));
  
  let projectData;
  let history = useHistory()
  
  if (project) {
    projectData = (
      <div>
        <h3>{project.name}</h3>
        <p>{project.description}</p>
      </div>
    );

  } else {
    projectData = <h2> Sorry but this project doesn't exist.</h2>;
  }

  return (
    <>
      {projectData}
      <button type="button" onClick={() => history.goBack()}>go back</button>
    </>
  );
};

export default Project;

现在我已经列出了所有内容，我遇到的问题是单击链接时 URL 会更新，但组件不会在浏览器中呈现，除非我物理刷新页面。

最初我认为我的 App 组件中的 Routes 是问题，但经过一些阅读后，我认为情况并非如此。由于对更多动态路线了解不足，我想我只是在兜圈子。

标签： reactjsjavascript-objectsreact-router-dom

解决方案

在第 15 行，删除exact布尔属性。

例如

// Before
<Route path="/projects" exact component={Projects}/>

// After
<Route path="/projects" component={Projects}/>

子路由的整个概念应该由子组件处理。

推荐阅读