I have such multiple routes for Career, Project and Apply Job.

But I want to speak about Project only I have a lot of projects data fetched from backend

In one single Project I have information about this project called ProjectDetails (this is the ponent that renders a single project) so f.e http://localhost:4000/#/projects/913 with ID of 913 has info about fetched project with ID 913 and so on.

What I am trying to achieve is to Redirect user to http://localhost:4000/ ( homepage) if he types in url something that do not exist, f.e http://localhost:4000/#/projects/someID (someID is never being fetched from backend)

Any thoughts or advices how I can achieve this with Redirect ponent of React-router?

My ProjectDetails ponent looks like this:

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={`/${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>
  );
}; 

Projects info is passed down from parent ponent to ProjectDetails

UPDATED

Here are my routes:

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

I have such multiple routes for Career, Project and Apply Job.

But I want to speak about Project only I have a lot of projects data fetched from backend

In one single Project I have information about this project called ProjectDetails (this is the ponent that renders a single project) so f.e http://localhost:4000/#/projects/913 with ID of 913 has info about fetched project with ID 913 and so on.

What I am trying to achieve is to Redirect user to http://localhost:4000/ ( homepage) if he types in url something that do not exist, f.e http://localhost:4000/#/projects/someID (someID is never being fetched from backend)

Any thoughts or advices how I can achieve this with Redirect ponent of React-router?

My ProjectDetails ponent looks like this:

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

Projects info is passed down from parent ponent to ProjectDetails

UPDATED

Here are my routes:

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

• javascript
• reactjs
• http-redirect
• redux
• react-router

• please share the code of your routes ? – Sakhi Mansoor Commented Aug 27, 2018 at 11:31

3 Answers 3

You can handle no match in the following way

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

Please refer the documentation for more details

You just need to use Redirect ponent from react-router.

You could modify ProjectDetails like this.

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

You can push new route if you don't find project. For your reference Programmatically navigate using react router