React-router redirect to Homepage

Question

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 component 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 component of React-router?

My ProjectDetails component 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 component to ProjectDetails

UPDATED

Here are my routes:

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

please share the code of your routes ? – Sakhi Mansoor Aug 27 '18 at 11:31 — Sakhi Mansoor, Aug 27 '18 at 11:31

score 2 · Answer 1 · answered Aug 27 '18 at 11:44

You can handle no match in the following way

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

Please refer the documentation for more details

score 1 · Accepted Answer · answered Aug 27 '18 at 11:37

1

You just need to use Redirect component 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
  );
}

answered Aug 27 '18 at 11:37

yaswanth

2,349
1
23
33

Great it works! But when user types in URL and hits enter it doesn't redirect. it redirects only if I refresh the page – Aug 27 '18 at 11:50
1

Nevermind, I did not refresh page. It works like a charm! This should be accepted answer. Thank you a lo! – Aug 27 '18 at 13:37

score 0 · Answer 3 · answered Aug 27 '18 at 12:00

0

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

answered Aug 27 '18 at 12:00

Jitesh Manglani

495
5
12

React-router redirect to Homepage

3 Answers3