到达路由器，渲染嵌套路由组件

Question

我在React应用程序中使用Reach路由器(带打字稿(。

使用嵌套路由，我陷入了如何将嵌套组件呈现为单独的(在单独的视图中(组件而不是父组件底部的子组件的卡住了。

代码是这样的：

App.tsx
--------
<Router>
<Customers path="/customers">
<PDFExport path=":id" />
</Customers>
<Users path="/users">
<PDFExport path=":id" />
</Users>
</Router>
Customers.tsx
--------------
interface IProps extends RouteComponentProps {children: any;}
const Customers: React.FC<IProps> = props => {
const[customers,setCustomers]=React.useSate(); // somehow fetch custmers
return (
<>
{customers.map(c=>(
<Button as={Link} to={`${c.id}`} />)
}
// on click the url chages to i.g. `/customers/123`
// but I do not get navigated to the PDFExport component
// but I have to render that here as child like follow
{props.childern}
// in this case I will have the content of PDFExport component at the bottom of Customers component
</>
);
}
PDFExport.tsx
-------------
interface IProps extends RouteComponentProps {
id?: string;
}
const PDFExport: React.FC<IProps> = props => {
return <div>{props.id}</div>;
// this will contain the comon form I want to use for different parents
};

我之所以使用 PDFExport 作为嵌套，是因为我想将它重用于不同的路由，例如;/users/:id，/customers/:id。

有没有办法将嵌套路由呈现为单独的组件而不是子组件。

Answer 1

你可以尝试这样的事情：

const Empty = ({ children }) => {
return children;
}
<Router>
<Empty path="/customers">
<Customers path="/" />
<PDFExport path=":id" />
</Empty>
<Empty path="/users">
<Users path="/" />
<PDFExport path=":id" />
</Empty>
</Router>

当您使用路径定义嵌套组件/时，它将用作该父级的索引组件。由于我们的父项为空，因此将显示该索引组件。导航到:id后，您将在父级中获得该组件，该组件又是空组件。

请参阅索引路线下。