Tukukkk

I am having a react-redux app and react-router v4 inside of app

Is there a way to catch all invalid URLs that were entered and save them to an array, like so ['https://mysite.co/progects', 'https://mysite.co/sometypo', 'https://mysite.co/something']?

And then I want to send that data to server for building some redirects and some sitemap

Currently I have this:

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

In your NoMatch component, you can have the logic to update unmatched/incorrect urls

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});

If you want, say, to redirect someone, who typed '/progects' to '/projects' - well, that's nice UX, but your Switch block will be cluttered with tens of possible invalid urls.
As I see it, maybe you should add <Redirect to='/main' /> at the bottom of your Switch so any invalid url gets redirected to Main component (or whichever you have) or to 404-Component.

If you still want to gather them, then instead of redirecting to Main or 404 Component, send them to specific Error component, where you can get the link via this.props.history.location and handle that link further in the component: send to server, set that url in local/session storage, etc.

Note that you'll need a way to store that data someplace which won't get cleared on unmounting.

In order to send users to that route you'll need to place that at the bottom of your Switch.

<Switch>

    ...{your routes}

    <Route component={Error} />

</Switch>

So actually all you need to do is handle those urls in your NoMatch component, like so

const path = this.props.history.location;

axios.post('your api', path);