Перенаправление React-роутера на домашнюю страницу - PullRequest
Новая
       18

Перенаправление React-роутера на домашнюю страницу

0 голосов
/ 27 августа 2018

У меня есть несколько таких маршрутов для Карьеры, Проекта и Прикладной работы.

Но я хочу говорить только о проекте У меня есть много данных проектов, извлеченных из бэкэнда

В одном отдельном проекте у меня есть информация об этом проекте под названием ProjectDetails (это компонент, который отображает один проект) поэтому f.e http://localhost:4000/#/projects/913 с идентификатором 913 содержит информацию о загруженном проекте с идентификатором 913 и т. д.

Я пытаюсь добиться перенаправления пользователя на http://localhost:4000/ (домашняя страница), если он вводит в URL что-то, что не существует, например http://localhost:4000/#/projects/someID (someID никогда не извлекается из бэкэнда)

Есть какие-нибудь мысли или советы, как мне этого добиться с помощью компонента Redirect React-router?

Мой компонент 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} alt="Web img" />
                </a>
              }
              {!!project.iTunesStoreURL &&
                <a target='_blank' href={project.iTunesStoreURL}>
                  <LazyImg src={appStoreImg} alt="AppStore img" />
                </a>
              }
              {!!project.GooglePlayURL &&
                <a target='_blank' href={project.GooglePlayURL}>
                  <LazyImg src={googlePlayImg} alt="Google Play img" />
                </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>

Ответы [ 3 ]

0 голосов
/ 27 августа 2018

Вы не можете обрабатывать совпадения следующим образом 

     <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>

Пожалуйста, обратитесь к документации для более подробной информации

0 голосов
/ 27 августа 2018

Вы можете нажать новый маршрут, если не нашли проект. Для справки Программная навигация с использованием реагирующего маршрутизатора

0 голосов
/ 27 августа 2018

Вам просто нужно использовать Redirect компонент из react-router.

Вы можете изменить 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
  );
}
...