带有react路由器v4/v5的嵌套路由

删除旧的解决方案

最终解决方案：

这是我现在使用的最终解决方案。这个示例还有一个全局错误组件，类似于传统的404页面

导入React，{Component}来自“React”；
从“react router dom”导入{交换机、路由、重定向、链接}；
const Home=（）=&gt&书信电报；部门&gt&书信电报；h1&gt；主页&lt/h1&gt&lt/部门&gt；；
常量用户=（）=&gt&书信电报；部门&gt&书信电报；h1&gt；用户&lt/h1&gt&lt/部门&gt；；
常量错误=（）=&gt&书信电报；部门&gt&书信电报；h1&gt；错误&lt/h1&gt&lt/部门&gt；
常量前端=道具=&gt；{
console.log（“前端”）；
返回(
&lt；div&gt；
&lt；h2&gt；前端&lt；/h2&gt；
&lt；p&gt；&lt；链接到=“/”&gt；根&lt；/Link&gt；&lt；/p&gt；
&lt；p&gt；&lt；链接到=“/user”&gt；用户&lt；/Link&gt；&lt；/p&gt；
&lt；p&gt；&lt；链接到=“/admin”&gt；后端&lt；/Link&gt；&lt；/p&gt；
&lt；p&gt；lt；链接至=“/路线为swiggity Swoote”&gt；swiggity swooty&lt；/Link&gt；lt；/p&gt；
&lt；开关&gt；
&lt；路由精确路径='/'组件={Home}/&gt；
&lt；路由路径='/user'组件={user}/&gt；
&lt；重定向到={{
状态：{error:true}
}}/&gt；
&lt；/Switch&gt；
&lt；页脚&gt；底部&lt；/footer&gt；
&lt；/div&gt；
);
}
const Backend=props=&gt；{
log（'Backend'）；
返回(
&lt；div&gt；
&lt；h2&gt；后端&lt；/h2&gt；
&lt；p&gt；&lt；链接到=“/admin”&gt；根&lt；/Link&gt；&lt；/p&gt；
&lt；p&gt；&lt；链接到=“/admin/user”&gt；user&lt；/Link&gt；&lt；/p&gt；
&lt；p&gt；&lt；链接到=“/”&gt；前端&lt；/Link&gt；&lt；/p&gt；
&lt；p&gt；&lt；链接至=“/admin/路线为swiggity Swoote”&gt；swiggity swooty&lt；/Link&gt；&lt；/p&gt；
&lt；开关&gt；
&lt；路由精确路径='/admin'组件={Home}/&gt；
&lt；路由路径='/admin/user'组件={user}/&gt；
&lt；重定向到={{
状态：{error:true}
}}/&gt；
&lt；/Switch&gt；
&lt；页脚&gt；底部&lt；/footer&gt；
&lt；/div&gt；
);
}
类GlobalErrorSwitch扩展组件{
previousLocation=this.props.location
组件将更新（下一步）{
const{location}=this.props；
如果（nextrops.history.action！=='POP'
&amp；&amp；（！location.state | |！location.state.error））{
this.previousLocation=this.props.location
};
}
render（）{
const{location}=this.props；
常量isError=(
地点、州和；
位置、状态、错误和；
this.previousLocation！==位置//不是初始渲染
)
返回(
&lt；div&gt；
{          
伊瑟罗
？&lt；路由组件={Error}/&gt；
：&lt；开关位置={isError？this.previousLocation:location}&gt；
&lt；路由路径=“/admin”组件={Backend}/&gt；
&lt；路由路径=“/”组件={Frontend}/&gt；
&lt；/Switch&gt；}
&lt；/div&gt；
)
}
}
类应用程序扩展组件{
render（）{
返回&lt；路由组件={GlobalErrorSwitch}/&gt；
}
}
导出默认应用程序；