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 fe 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, fe 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>
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
);
}
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
You can push new route if you don't find project. For your reference Programmatically navigate using react router
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.