在React Router Dom中设置一个不属于App.js的独立路由的正确方法是什么?

Question

我试图在BulletinBoard.js创建一个独立的路由(不确定这是否是正确的术语)，在那里我可以使用Link去Create Bulletin组件。我还试图在BulletinList.js创建另一个独立的路由，在那里我可以用它们各自的id导航到Edit Bulletin。

在此之前，我尝试使用useRouteMatch与路径和url，但显然这不是正确的方式来做到这一点，现在我被告知使用useLocation，它确实添加了/createbulletin和/editbulletin/id路径后面的当前url，但它不导航到组件本身。

在过去的两天里，我一直在绞尽脑汁，但我仍然没有想出正确的方法来做这件事。

这是我创建的代码盒供参考。

Answer 1

你的代码在url改变后没有导航到另一个组件的原因是你在声明路由时没有使用exact属性。所以它匹配/bulletinboard/anything，然后它总是渲染BulletinBoard组件。

您可以在App.js文件中定义所有路由，如

<Switch>
<Route path="/" component={Home} exact />
<Route path="/bulletinboard" component={BulletinBoard} exact />
<Route path="/bulletinboard/edit/:id" component={EditBulletinBoard} exact />
<Route path="/infohub" component={InfoHub} exact />
<Route component={NotFound} />
</Switch>

还有，查看useHistory钩子

所以在BulletinBoard.js当用户点击链接

onClick={() => history.push(`/bulletinboard/edit/${id}`)}

请注意，编辑路由会呈现一个codesandbox还没有的不同组件