React 路由器渲染两个子组件，而不仅仅是一个

Question

我正在尝试向我的应用程序添加路由，但由于某种原因，有两个组件被呈现到页面，而不仅仅是一个。

我的代码如下所示(相关部分(：

import React from "react";
import Board from "./Components/Board";
import Navbar from "./Components/Navbar";
import TaskDetail from "./Components/TaskDetail";
import { LanesProvider } from "./Context/lanes.context";
import { TasksProvider } from "./Context/tasks.context";
import { BrowserRouter, Route, Switch } from "react-router-dom";

function App(props) {
const getTask = props => {
return <TaskDetail />;
};
return (
<>
<LanesProvider>
<TasksProvider>
<Navbar />
<Board />
<BrowserRouter>
<Switch>
<Route exact path="/" render={() => <Board />} />
<Route exact path="/board" render={() => <Board />} />
<Route exact path="/board/:taskName" render={() => getTask()} />
</Switch>
</BrowserRouter>
</TasksProvider>
</LanesProvider>
</>
);
}

现在基本上当我导航到"本地主机/板/测试"时，我希望只看到<TaskDetail/>组件，但相反，我得到了<Board />和<TaskDetail/>。

我没想到会因为布尔值exact而发生这种情况。

仅供参考：getTask()现在只返回一个组件，因为我想在实现进一步逻辑之前先让路由工作。

到目前为止，我找不到解决方案。

提前谢谢你。

Answer 1

<BrowserRouter>之外有一个<Board />组件

Answer 2

import React from "react";
import Board from "./Components/Board";
import Navbar from "./Components/Navbar";
import TaskDetail from "./Components/TaskDetail";
import { LanesProvider } from "./Context/lanes.context";
import { TasksProvider } from "./Context/tasks.context";
import { BrowserRouter, Route, Switch } from "react-router-dom";

function App(props) {
const getTask = props => {
return <TaskDetail />;
};
return (
<>
<LanesProvider>
<TasksProvider>
<Navbar />
<Board /> --> Remove this component from here
<BrowserRouter>
<Switch>
<Route exact path="/" render={() => <Board />} />
<Route exact path="/board" render={() => <Board />} />
<Route exact path="/board/:taskName" render={() => getTask()} />
</Switch>
</BrowserRouter>
</TasksProvider>
</LanesProvider>
</>
);
}