反应路由器重定向到主页

Posted 2023-02-21

【中文标题】反应路由器重定向到主页

【英文标题】：React-router redirect to Homepage

【发布时间】：2019-02-01 22:20:05

【问题描述】：

我有多种职业路线、项目路线和申请工作路线。

但我只想谈谈项目 我有很多从后端获取的项目数据

在一个项目中，我有关于这个项目的信息，称为 ProjectDetails（这是呈现单个项目的组件） 因此，ID 为 913 的 f.e http://localhost:4000/#/projects/913 具有有关已获取的 ID 为 913 的项目的信息，依此类推。

我想要实现的是将用户重定向到 http://localhost:4000/（主页），如果他在 url 中键入不存在的内容，例如 http://localhost:4000/#/projects/someID（永远不会从后端获取 someID）

有什么想法或建议可以通过 React-router 的 Redirect 组件实现这一点吗？

我的 ProjectDetails 组件如下所示：

let ProjectDetails = ( projects, match ) => 
  if (!projects.length) return false;
  const project = projects.find(item => item.Id == match.params.id);
  return (
    <Element name='Projects'>
      <SectionActiveTile match=match name=project.Title>
        <div className='project_details_content'>
          <div className="project_images">
            <LazyImg src=`http://mywebsite.co/media/projects/$project.ImageURL` alt=`$project.Title image` />
            <div className="project_icons">
              !!project.WebSiteURL &&
                <a target='_blank' href=project.WebSiteURL>
                  <LazyImg src=webImg  />
                </a>
              
              !!project.iTunesStoreURL &&
                <a target='_blank' href=project.iTunesStoreURL>
                  <LazyImg src=appStoreImg  />
                </a>
              
              !!project.GooglePlayURL &&
                <a target='_blank' href=project.GooglePlayURL>
                  <LazyImg src=googlePlayImg  />
                </a>
              
            </div>
          </div>
          <div className="project_description">
            <h4>Customer:</h4>
            <p>project.Customer</p>
            <h4>Project Facts:</h4>
            <p>project.ProjectFacts</p>
            <h4>Technologies:</h4>
            <p>project.Technologies</p>
          </div>
        </div>
      </SectionActiveTile>
    </Element>
  );
; 

项目信息从父组件传递到 ProjectDetails

更新

这是我的路线：

    <Switch>
      <Route path='/projects/:id' component=ProjectDetails />
      <Route path='/career/:id' component=CareerDetails />
      <Route path='/apply-for-job' render=(props) => (
        <ModalWindow
          ...props
          modalHeader='Apply form'>
          <ApplyForm history=props.history />
        </ModalWindow>
      ) />
      <Route path='/' component=withScrollPreservation(LandingPage, Footer) />     
    </Switch>

【问题讨论】：

请分享您的路线代码？

【参考方案1】：

您只需要使用来自react-router 的Redirect 组件。

你可以像这样修改ProjectDetails。

let ProjectDetails = ( projects, match ) => 
  let HomeURL = ""; //add your homeURL here
  if (!projects.length) 
      return (<Redirect to = HomeURL />);
  
  const project = projects.find(item => item.Id == match.params.id);
  if(project === undefined) 
      return (<Redirect to = HomeURL />);
  
  return (
      //your code as is
  );

【讨论】：

很好用！但是当用户输入 URL 并点击输入时，它不会重定向。只有当我刷新页面时它才会重定向

没关系，我没有刷新页面。它就像一个魅力！这应该被接受的答案。谢谢你！

【参考方案2】：

你可以通过以下方式处理不匹配

     <Switch>
          <Route path='/projects/:id' component=ProjectDetails />
          <Route path='/career/:id' component=CareerDetails />
          <Route path='/apply-for-job' render=(props) => (
            <ModalWindow
              ...props
              modalHeader='Apply form'>
              <ApplyForm history=props.history />
            </ModalWindow>
          ) />
          <Route path='/' component=withScrollPreservation(LandingPage, Footer) />     
         <Route component=HomePage/> 
        </Switch>

详情请咨询documentation

【参考方案3】：

如果您没有找到项目，您可以推送新路线。 供您参考Programmatically navigate using react router