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

一般来说，我是个新手，所以如果有简单的解决办法，我会提前道歉

我有两个组件：

仪表板
--侧栏（在仪表板中调用）

我在仪表板中设置了路径，在侧边栏中设置了链接。当我点击一个链接时，URL会改变，但仪表板不会重新呈现，所以它只会在页面刷新时改变。我的问题是，是否有一种方法可以通过react router将我的仪表板设置为在单击侧边栏中的链接时重新渲染

进口

import { BrowserRouter, Route, Link } from 'react-router-dom';

仪表板组件：

<DashboardSidebar />
<BrowserRouter>
    <div>
        <Route exact path="/" component={DashboardLanding} />
        <Route path="/profile" component={ViewUsers} />
        <Route path="/project" component={ViewProjects} />
    </div>
</BrowserRouter>

仪表板侧栏组件

<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>

链接
链接
链接

侧边栏组件中不需要其他组件。用div或者碎片把它包起来

也许问题出在： 最后一行代码BrowserRouter您有打开标签而不是关闭标签

第二种解决方案是尝试使用div标记更改包装器BrowserRouter。

---

BrowserRouter需要将仪表板边栏组件放在其中，并将所有组件封装在一个子组件中

<BrowserRouter>
<>
<DashboardSidebar />
<div>
    <Route exact path="/" component={DashboardLanding} />
    <Route path="/profile" component={ViewUsers} />
    <Route path="/project" component={ViewProjects} />
</div>
</>

---

eoan！下面是我如何使用这种逻辑

import { BrowserRouter as Router } from 'react-router-dom';

function ParrentComponent() {
  return(
    <Router>
       <div>
         <SomeNavBar />
         <SomeFeed />
       </div>
    </Router>
  )
};

export default ParrentComponent;

----------------------------------------------------------------------------

import { Link } from 'react-router-dom';

function SomeNavBar(){
  return(
    <Router>
       <div>
         <Link to="/">Home</Link>
         <Link to="/about"></Link>>
       </div>
    </Router>
  )
};

export default SomeNavBar;

----------------------------------------------------------------------------

import { Switch, Route } from 'react-router-dom';

function SomeFeed(){
  return(
    <Switch>
       <Route path="/" exact>
            <PostUpdates />
            <SomeOtherPost />
            ...
       </Route> 
       <Route path="/about" >
            <Welcome />
            <Description />
            ...
       </Route> 
    </Switch>
  )
};

export default SomeFeed;

从'react Router dom'导入{BrowserRouter as Router}；
函数ParrentComponent（）{
返回(
)
};
导出默认ParrentComponent；
----------------------------------------------------------------------------
从'react router dom'导入{Link}；
函数SomeNavBar（）{
返回(
家
>
)
};
导出默认导航栏；
----------------------------------------------------------------------------
从“react router dom”导入{Switch，Route}；
函数SomeFeed（）{
返回(
...
...
)
};
导出默认的SomeFeed；

---

只需包装parrent组件。

对不起，第一个问题只是因为我在复制和粘贴更整洁的代码时出错！我也按照下面的@prithweedas建议做了，并将所有侧边栏组件代码移到了我的仪表板上，但是，该组件仍然没有重新加载。您的代码中还有两个吗？不，您只需要在链接下的标记，而不需要在应用程序中的任何位置，所以只要去掉你标签周围的标签，放一个替代品就行了。正如我说的，在评论中发布代码有点困难，我会和你分享一个要点。这里有一个指向Gistyah的链接，这是我的错，忘记了，更新了要点，如果

这个语法不适合你，就用一个代替这些