我在职业,项目和申请工作上有这么多路线。
但是我只想谈谈Project 我有很多从后端获取的项目数据
在一个单独的项目中,我有关于这个项目的信息,称为ProjectDetails(这是呈现单个项目的组件) 因此ID为913的http://localhost:4000/#/projects/913具有有关ID为913的已提取项目的信息,依此类推。
我要实现的目标是,如果用户输入url中不存在的内容,例如http://localhost:4000/,则将用户重定向到http://localhost:4000/#/projects/someID(主页)
有任何想法或建议如何使用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>
答案 0 :(得分:0)
您只需要使用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
);
}
答案 1 :(得分:0)
您可以通过以下方式处理不匹配的情况
<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>
有关更多详细信息,请参考documentation
答案 2 :(得分:0)
如果找不到项目,则可以推送新路线。 供您参考Programmatically navigate using react router