React 路由器不会从其他组件页面加载页面

Question

我使用react与django在后端。当从组件页面单击链接时，我希望打开相应的页面。但是page不渲染任何东西。

这是我的主页。js其中定义了main react router。

<Router>
<Navigation />
<Switch>
<Route exact path= "/">
<Home />
</Route>
<Route path="/communication">
<Communication />
</Route>
{/* <Route path="/forum-create" component={ForumCreate} /> */}
<Route path="/calendar">
<EventCalendar />
</Route>
<Route path="/information">
<Informations />
</Route>
<Route path="/links">
<Links />
</Route>
</Switch>
</Router>

我已经在另一个我想要渲染的页面中定义了Route。

import React from 'react'
import {BrowserRouter as Router, Switch, Route, Link, Redirect,} from 'react-router-dom'

function Communication() {
return (
<div>
<Forum />
{/* <Route path="/forum-create" component={ForumCreate} /> */}
</div>
)
}

function Forum() {
return (
<div>
<h2 className="page-head">Forum</h2>
<div className="forum">
<Link to="forum-create">Create Topic</Link>
<table className="forum-table">
<th>
<td>Topic</td>
</th>
<th>
<td>Date</td>
</th>
<th>
<td>Posted By</td>
</th>
<tr>
<td>Test Topic</td>
<td>20/05/2021</td>
<td>Awesome User</td>
</tr>
<tr>
<td>Test Topic</td>
<td>20/05/2021</td>
<td>Awesome User</td>
</tr>
</table>
</div>
</div>
)
}

function ForumCreate() {
return (
<div>
Create a Topic Forum
Some Chagnes
</div>
)
}
export default Communication

我只想从通信页面呈现组件ForumCreate()。我已经尝试在Route内homepage.js的路径，但仍然点击Link不加载ForumCreate功能。我可以渲染这个函数，如果它在homepage.js

Answer 1

当Communication组件被渲染时，当前路径是path="/communication"，所以如果你现在渲染额外的路由，有一个不同的路径前缀(即不是"/communication")像path="/forum-create"，那么当你链接到该路由的Switch不再匹配"/communication"和Communication组件卸载，从而卸载<Route path="/forum-create" component={ForumCreate} />路由组件。

解决方案是在Switch的根级声明论坛创建路由，所以它是总是可以匹配和呈现，或者作为"/communication"的子路由嵌套。

作为根级路由。

<Router>
<Navigation />
<Switch>
<Route exact path= "/">
<Home />
</Route>
<Route path="/communication">
<Communication />
</Route>
<Route path="/forum-create" component={ForumCreate} /> // <-- render in root
<Route path="/calendar">
<EventCalendar />
</Route>
<Route path="/information">
<Informations />
</Route>
<Route path="/links">
<Links />
</Route>
</Switch>
</Router>

作为嵌套路由呈现。

function Communication() {
return (
<div>
<Forum />
<Route
path="/communication/forum-create" // <-- nested route
component={ForumCreate}
/>
</div>
)
}
function Forum() {
return (
<div>
<h2 className="page-head">Forum</h2>
<div className="forum">
<Link to="/communication/forum-create"> // <-- nested route
Create Topic
</Link>
...
</div>
</div>
)
}