Question

我在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内部呈现“仪表板”组件。如果有人单击“点击此处”链接，则“仪表板”组件应替换为“广告系列”组件。

但是现在发生的事情是，当有人单击“单击此处”时，地址栏中的URL随我所愿更改为“ localhost：3000 / campaigns”，但未加载“ Campaigns”组件。而是出现一个空白页。

我在做什么错？

请问我是否应该使我的问题更清楚。谢谢！

Answer 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>
);

Answer 2

尝试如下定义路线：

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

“精确”可能是必需的，也可能不是必需的。

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

2 个答案: