[英]React-router redirect to Homepage
我有多种职业,项目和应聘工作路线。
但是我只想谈谈Project,我有很多从后端获取的Project数据
在一个项目中,我有一个名为ProjectDetails的项目信息(这是呈现单个项目的组件),因此http:// localhost:4000 /#/ projects / 913 (ID为913)具有有关ID 913的已提取项目的信息等等。
我要实现的目标是,如果用户在url中输入不存在的内容,例如http:// localhost:4000 /#/ projects / someID (someID为, 则将用户重定向到http:// localhost:4000 / (主页)永远不会从后端获取)
任何想法或建议我如何使用React-router的Redirect组件来实现?
我的ProjectDetails组件如下所示:
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>
);
};
项目信息从父组件传递到ProjectDetails
更新
这是我的路线:
<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>
您只需要使用react-router
Redirect
组件。
您可以像这样修改ProjectDetails
。
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
);
}
您可以通过以下方式处理不匹配的问题
<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>
请参阅文档以获取更多详细信息
如果找不到项目,则可以推新路线。 供参考, 以使用React Router进行编程导航
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.