Реагирует маршрутизатор, отображающий два дочерних компонента вместо одного

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>
        </>
    );
}

Теперь, в основном, когда я перехожу к "localhost / board / test", я ожидал бы просто увидеть компонент <TaskDetail/>, но вместо этого я получил <Board /> AND <TaskDetail/>.

Я не ожидал, что это произойдет из-за логического выражения exact.

К вашему сведению: getTask() сейчас только возвращает компонент, потому что я хотел, чтобы сначала заработали маршруты, прежде чем реализовывать дальнейшие логи c.

Пока я не смог найти решение к этому.

Заранее спасибо.

Answer 1

Существует компонент <Board /> вне вашего <BrowserRouter>

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>
        </>
    );
}