[英]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.