reactjs - 子路由未显示 React-router
问题描述
我将路由分隔到不同的文件下面是代码。当我尝试导航/子路线时,什么都没有显示。它浪费了我的时间
路线.js:-
import App from "./components/app";
import Post from "./components/post";
export const routes = [
{
component: App,
path: '/',
childRoutes: [{
path: 'child',
component: Post
}]
},
{
component: Post,
path: '/post',
childRoutes: [{
path: 'dashboard',
component: App
}]
}
];
index.js:-
<Router>
<div>
<Switch>
{routes.map(props => <Route exact {...props}>{props.childRoutes.map(e=><Route exact {...e}/>)}</Route>)}
</Switch>
</div>
</Router>
解决方案
您不能在react-router
v4.x 中嵌套这样的路由(我更喜欢 v3.0.4 的众多原因之一)。您必须指向单个父组件,然后该组件具有单独Route
的 s 以确定要安装哪个组件或使用子路由填充Route
'方法。render
工作示例:https ://codesandbox.io/s/6zn2103rxw (渲染方法——不是很干净)
工作示例:https ://codesandbox.io/s/ll33rmz0n7 (映射路线——同样不是很干净)
工作示例:https ://codesandbox.io/s/8knzzrq5k8 (父组件——最容易阅读和理解)
路线/index.js
import React from "react";
import { Route } from "react-router-dom";
import Home from "../components/Home";
import Header from "../components/Header";
import FullRoster from "../components/FullRoster";
import Schedule from "../components/Schedule";
export default () => (
<div>
<Header />
<Route exact path="/" component={Home} />
<Route path="/roster" component={FullRoster} />
<Route path="/schedule" component={Schedule} />
</div>
);
组件/FullRoster.js(父)
import React from "react";
import { Route } from "react-router-dom";
import ShowPlayerRoster from "./ShowPlayerRoster";
import ShowPlayerStats from "./ShowPlayerStats";
export default ({ match }) => (
<div>
<Route exact path={match.path} component={ShowPlayerRoster} />
<Route path={`${match.path}/:id`} component={ShowPlayerStats} />
</div>
);
组件/ShowRoster.js(子)
import map from "lodash/map";
import React from "react";
import { Link } from "react-router-dom";
import PlayerAPI from "../api";
export default () => (
<div style={{ padding: "0px 20px" }}>
<ul>
{map(PlayerAPI.all(), ({ number, name }) => (
<li key={number}>
<Link to={`/roster/${number}`}>{name}</Link>
</li>
))}
</ul>
</div>
);
组件/ShowPlayerStats.js(子)
import React from "react";
import PlayerAPI from "../api";
import { Link } from "react-router-dom";
export default ({ match: { params } }) => {
const player = PlayerAPI.get(parseInt(params.id, 10));
return !player ? (
<div style={{ padding: "0px 20px" }}>
Sorry, but the player was not found
</div>
) : (
<div style={{ padding: "0px 20px" }}>
<h1>
{player.name} (#{player.number})
</h1>
<h2>Position: {player.position}</h2>
<Link to="/roster">Back</Link>
</div>
);
};
推荐阅读
- javascript - 解析嵌套的 javascript 对象
- serial-port - RS232 上的 DTR/RTS 可以用作 GPIO 来打开/关闭传感器吗?协议是否允许这种配置?
- logging - 在 IDE 中运行时的 Logback 配置
- git - 忽略已经提交给 git 的文件
- spring - 项目构建错误:io.zipkin.java:zipkin-autoconfigure-ui:jar 的“dependencies.dependency.version”缺失
- android - Android Studio 是否提供了一种测试设备之间交互的方法?
- python - 如何解决excel行列难?
- r - R不会将数据识别为数字
- mariadb - Varchar PRIMARY_KEY 不能长于 191
- php - 我想在 php 中返回 json 类型