Как сохранить неверные недействительные URL, которые были введены? - PullRequest
Новая
       15

Как сохранить неверные недействительные URL, которые были введены?

0 голосов
/ 20 ноября 2018

У меня в приложении есть приложениеact-redux и response-router v4 внутри приложения

Есть ли способ перехватить все введенные недействительные URL-адреса и сохранить их в массив, например ['https://mysite.co/progects', 'https://mysite.co/sometypo', 'https://mysite.co/something']?

А затем я хочу отправить эти данные на сервер для создания некоторых перенаправлений и карты сайта

В настоящее время у меня есть это: 

 <Switch>
              {/* <Route path='/blog' exact component={Blog} /> */}
              <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 exact path='/' component={withScrollPreservation(LandingPage)} />
              <Route component={NoMatch} />
              {/* <Route component={withScrollPreservation(LandingPage)} /> */}
            </Switch>

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

В вашем компоненте NoMatch вы можете иметь логику для обновления несоответствующих / неправильных URL-адресов 

class NoMatch extends React.Component {
   componentDidMount() {
     const { addNoMatchUrl } = this.props;
     // you might want to handle the duplicate url logic here too in addNoMatchUrl method
     addNoMatchUrl(this.props.location.pathname);
   }
   componentDidUpdate(prevProps) {
      const { location, addNoMatchUrl } = this.props;
      if (location.pathname !== prevProps.location.pathname) {
          addNoMatchUrl(location.pathname);
      }
   }
   render() {
      // render logic
   }
}

export default connect(null, {addNoMatchUrl});
0 голосов
/ 20 ноября 2018

Если вы хотите, скажем, перенаправить кого-то, кто набрал '/progects' на '/projects' - хорошо, это хороший UX, но ваш блок Switch будет загроможден десятками возможных недействительных URL.Как я понимаю, возможно, вам следует добавить <Redirect to='/main' /> внизу вашего Switch, чтобы любой недействительный URL-адрес перенаправлялся на основной компонент (или какой бы то ни было у вас) или на 404-компонентный.

Если вы по-прежнемухотите собрать их, затем вместо перенаправления на Main или 404 Component отправьте их на определенный Error компонент, где вы можете получить ссылку через this.props.history.location и обработать эту ссылку далее в компоненте: отправить на сервер, установить этот URLв локальном / сессионном хранилище и т. д.

Обратите внимание, что вам понадобится способ хранить эти данные в каком-либо месте, которое не будет очищено при размонтировании.

Для отправки пользователей по этому маршрутувам нужно поместить это в нижней части вашего Switch. 

<Switch>
    ...{your routes}
    <Route component={Error} />
</Switch>

Так что на самом деле все, что вам нужно сделать, это обработать эти URL в вашем NoMatch компоненте, например, 

const path = this.props.history.location;
axios.post('your api', path);
...