Question

我正在学习React.js。我正在使用React Router版本4.3.1和React Router dom 4.3.1。

下面是我当前的应用结构。

<React.Fragment>
  {/* sidebar component */}
  <SideBar store = {Mystore} />
  <div className="main-panel">
  {/* navbar component */}
  <NavBar store = {Mystore}/>
  {/* content component */}
  <Content store = {Mystore}/>
  {/* footer component */}
  </div>
</React.Fragment>

在我的内容组件中，我设置了一个路由器，如下所示。

<BrowserRouter> 
  <React.Fragment> 
  <Route exact path="/phoenix/public" component={Login} /> 
  <ProtectedRoute exact path="/phoenix/public/sample" component={SamplePage} /> 
  <ProtectedRoute exact path="/phoenix/public/view_ticket" component={ViewTicket} /> 
  <ProtectedRoute exact path="/phoenix/public/create_ticket" component={CreateTicket} /> 
  <ProtectedRoute exact path="/phoenix/public/dashboard" component={Dashborad} /> 
  </React.Fragment> 
</BrowserRouter>

此处 ProtectedRoute 是一个功能组件，可检查用户是否已通过身份验证并返回 Route

我的侧边栏有一些 a 标记，如下所示。

<li> 
  <a href="dashboard"> 
  <i className="ti-panel" /> 
  <p>Dashboard</p> 
  </a> 
</li>

我的目标是导航至不同的路线，而无需单击侧边栏上的页面即可刷新页面。但是，单击href会重新加载页面，并且Mobx中的所有状态都会刷新。我已尝试重定向，但无法获得兄弟姐妹组件中声明的路由器（内容是侧边栏的兄弟姐妹）。我不知道如何实现这一目标。

Answer 1

如您对问题的评论中所述，常规<a>标签将不起作用，并刷新页面。因此，您将需要使用Link或NavLink。

如果要使其在侧边栏（子组件）中工作，则需要将<BrowserRouter>包装在要使用路线的所有组件周围。

例如这样的示例（使用您的代码）：

<BrowserRouter>
<React.Fragment>
  {/* sidebar component */}
  <SideBar store = {Mystore} />
  <div className="main-panel">
  {/* navbar component */}
  <NavBar store = {Mystore}/>
  {/* content component */}
  <Content store = {Mystore}/>
  {/* footer component */}
  </div>
</React.Fragment>
</BrowserRouter>

您的补充工具栏将如下所示：

<React.Fragment>
    <Link to="/dashboard">Dashboard</Link> 
    ...
</React.Fragment>

然后在您的内容组件中。您需要删除<BrowserRouter>

Answer 2

我按照@PreDinnerSnack的建议，通过如下所示的BrowserRouter解决了我的问题。

<BrowserRouter>
<React.Fragment>
  {/* sidebar component */}
  <SideBar store = {Mystore} />
  <div className="main-panel">
  {/* navbar component */}
  <NavBar store = {Mystore}/>
  {/* content component */}
  <Content store = {Mystore}/>
  {/* footer component */}
  </div>
</React.Fragment>
</BrowserRouter>

然后，我在“我的侧边栏”组件中使用了Navlink。这解决了导航到所需路由而不刷新页面的问题。但是后来我遇到了另一个问题，因为内容没有按照路线刷新。

对于这个问题，我发现Mobx的观察者HOC正在干扰我的路由器。我必须使用withRouter包装我的内容，如下所示。

withRouter(observer(Content));

我希望我的解决方案能对某些人派上用场，因为我没有找到关于React Router实现示例的教程，例如在网上。

从React Router V4中的同级组件执行路由更改

2 个答案: