CODEWITHSUNDEEP
javascriptreactjsreact-router
maximiliansch
maximiliansch

Reputation: 55

React router rendering two child components instead of just one

I'm trying to add routes to my application but for some reason there are two components being rendered to the page instead of just one.

My code looks like this (the relevant part):

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

Now basically when I'm navigating to "localhost/board/test" I would expect to just see the <TaskDetail/> component but instead I get the <Board /> AND <TaskDetail/>.

I didn't expect this to happen because of the exact boolean.

FYI: getTask() is only returning a component right now because I wanted to get the routes to work first before implementing further logic.

So far I could not find a solution to this.

Thank you in advance.

Upvotes: 0

Views: 82

Answers (2)

Divyam Dhadwal
Divyam Dhadwal

Reputation: 475

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

Upvotes: 1

Anurag Srivastava
Anurag Srivastava

Reputation: 14413

There is a <Board /> component outside your <BrowserRouter>

Upvotes: 2

Related Questions