时间戳

首页 > 解决方案 > React 路由器渲染两个子组件而不是一个

javascript - React 路由器渲染两个子组件而不是一个

问题描述

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

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

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()现在只返回一个组件，因为我想在实现进一步逻辑之前先让路由工作。

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

先感谢您。

标签： javascriptreactjsreact-router

解决方案

<Board />您的外部有一个组件<BrowserRouter>

推荐阅读