Routing - Reactjs - only first Route works

Question

我想创建一个可重用的路由组件

import React from 'react';
import { Route } from 'react-router-dom';
interface ITProffesion {
proffesion: string;
}
export const ITRoleRouter: React.FC<ITProffesion> = ({ proffesion }) => (
<Route exact path={`/${proffesion}`} key={proffesion}>
<p>Works {proffesion}</p>
</Route>
);

，但当我想使用它-只有第一个路由工作-例子(只有后端工作-是一个测试i将从api下载数据):

export const App: React.FC<{}> = () => (
<Router>
<Switch>
<Route exact path="/">
<DemoContainer />
</Route>
<ITRoleRouter proffesion="backend" />
<ITRoleRouter proffesion="frontend" />
</Switch>
</Router>
);

怎么了?我可以这样使用react路由器吗?谢谢,亚洲

Answer 1

这种行为的原因是Switch组件使用其子组件的path和from道具来检查是否有路由匹配，这决定了渲染的内容。

ITRoleRouter组件实例没有这些道具，但它们是Switch组件的子组件。

因为两个ITRoleRouter实例都没有这些道具，所以它会匹配第一个实例。

所以你可以这样做:

interface ITProffesion {
path: string;
proffesion: string;
}
const ITRoleRouter: React.FC<ITProffesion> = ({ path, proffesion }) => (
<Route exact path={path} key={proffesion}>
<p>Works {proffesion}</p>
</Route>
);
const App: React.FC<{}> = () => (
<Router>
<Switch>
<Route exact path="/">
<DemoContainer />
</Route>
<ITRoleRouter path="/backend" proffesion="backend" />
<ITRoleRouter path="/frontend" proffesion="frontend" />
</Switch>
</Router>
);

查看这个Github问题获取更多信息。

Answer 2

https://reactrouter.com/core/api/Switch

<Switch>的所有子元素都应该是<Route>或<Redirect>元素。只有第一个匹配当前位置的子元素才会被呈现。

Switch只适用于直接在它下面的第一级组件。

沙箱