当我在 react-router 中更改嵌套路由中的链接时，组件未加载答案

【问题标题】：Component not loading when i change link in nested route in react-router当我在 react-router 中更改嵌套路由中的链接时，组件未加载
【发布时间】：2020-01-09 15:05:53
【问题描述】：

我在 ComponentA 中有以下代码

        <BrowserRouter> 
          <Switch>
            <Route exact path="/"> <ComponentB /> </Route>
            // More Routes are here
          </Switch>
        </BrowserRouter>

我在 ComponentB 中有以下代码

          <NavLink to="/campaigns">CLICK HERE</NavLink> 
          <Switch>
            <Route exact path="/"> <Dashboard /> </Route>
            <Route path="/campaigns"> <Campaigns /> </Route>
          </Switch>

我想要的是默认情况下在 ComponentB 中呈现“仪表板”组件。如果有人点击“CLICK HERE”链接，“Dashboard”组件应替换为“Campaigns”组件。

但是现在发生的事情是，当有人点击“CLICK HERE”时，地址栏中的 url 如我所愿更改为“localhost:3000/campaigns”，但“Campaigns”组件未加载。而是出现一个空白页。

我做错了什么？

请问我是否应该更清楚地说明我的问题。谢谢！

【问题讨论】：

我认为这是我对嵌套路由的理解有问题。

标签： reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

如果您不想更改路由，则不应使用 react-router。只需使用 JS。我会使用状态来保存哪个选项卡处于活动状态，并且只显示活动的选项卡。

const [output, setOutput] = useState('dashboard');

return (
  <div>
    <div>
      <button onClick={() => setOutput('dashboard')}>Dashboard</button>
      <button onClick={() => setOutput('campaigns')}>Campaigns</button>
    </div>
    {output === 'dashboard' ? <Dashboard /> : <Campaigns />}
  </div>
);

【讨论】：

嗯，我想改变路线，因为我的应用程序需要它。

【解决方案2】：

尝试如下定义您的路线：

<Route path="/campaigns" render={Campaigns} exact />

“确切”可能是必要的，也可能不是。

【讨论】：

是的，那是早期的代码。还是不行。