在另一个组件中反应路由器 Dom 链接

eoa*_*oan 5 reactjs react-router-dom

总的来说,我对 React 很陌生,所以如果有一个简单的解决方案,我会提前道歉。

我有两个组成部分:

仪表板——
侧边栏(在仪表板中调用)

我在仪表板中设置了路径,在侧边栏中设置了链接。当我单击链接时,URL 会发生变化,但仪表板不会重新呈现,因此它只会在页面刷新时发生变化。我的问题是,有没有办法通过 react-router 设置我的仪表板以在单击侧栏中的链接时重新呈现?

进口

import { BrowserRouter, Route, Link } from 'react-router-dom';
Run Code Online (Sandbox Code Playgroud)

仪表板组件:

<DashboardSidebar />
<BrowserRouter>
    <div>
        <Route exact path="/" component={DashboardLanding} />
        <Route path="/profile" component={ViewUsers} />
        <Route path="/project" component={ViewProjects} />
    </div>
</BrowserRouter>
Run Code Online (Sandbox Code Playgroud)

仪表板侧边栏组件

<BrowserRouter>
    <Link
        to="/"
        className="nav-link" 
        onClick={this.navigation} 
    >
    Link</Link>
    <Link
        to="/profile"
        className="nav-link" 
        onClick={this.navigation} 
    >
    Link</Link>
    <Link
        to="/project"
        className="nav-link" 
        onClick={this.navigation} 
    >
    Link</Link>
<BrowserRouter>
Run Code Online (Sandbox Code Playgroud)

Pri*_*Das 1

不需要在您的 SideBar 组件中使用另一个组件。用 div 或 Fragment 包裹它。