Reactjs 添加BrowserRouter以在React中渲染特定div中的组件

我是新手。我想使用React Router创建一个侧导航栏，然后根据单击的链接渲染组件。我越来越困惑于我应该如何以及在哪里放置我的浏览器路由器

这是我的index.js文件的一个片段

ReactDOM.render(<Header/>, document.getElementById('header'));
ReactDOM.render(<SideBar/>, document.getElementById('sidebar'));
ReactDOM.render(<Footer/>, document.getElementById('footer'));

ReactDOM.render（，document.getElementById（'header'）；
render（，document.getElementById（'sidebar'）；
render（，document.getElementById（'footer'）；

还有一个ID=mainBody的元素，我想在其中渲染根据我在侧边栏上单击的内容添加/替换的组件

我现在有一个标题组件，我想更改

下面是侧栏组件导入的组件侧导航。这将处理路由链接

<BrowserRouter>
            <li className="st-bottom-line">
                    <Link to="/Dashboard">Dashboard </Link>
            </li>

            <li className="st-bottom-line">
                    <Link to='/Configuration'> Configuration </Link>
            </li>               
            <div>
                    <Route path="/Dashboard" render={(props) => <Heading {...props} name={`Dashboard`} />} />
                    <Route path="/Configuration" render={(props) => <Heading {...props} name={`Configuration`} />} />
            </div>
    </BrowserRouter>

仪表板


配置

} />
} />

您可以想象，现在当我单击这两个链接中的任何一个时，标题组件就会出现在侧边栏中

我应该做哪些更改，使标题出现在另一个组件中？我已经看过无数的SideNav和路由的例子，但我仍然很困惑，因为我试图做的是结构上的不同

---

提前谢谢你

你可能想改变你构建应用程序的方式。约定是只有一个ReactDOM.render（）来呈现HOC组件（例如，您的应用程序组件），然后它根据BrowserRouter中定义的路由来呈现各种子组件

下面是一个实际工作的简单结构：

index.html：

index.js：

从“React”导入React；
从“react dom”导入react dom；
从“/App”导入{App}；
ReactDOM.render（，document.getElementById（'root'））；

App.js

从“React”导入React；
从“react router dom”导入{BrowserRouter}；
导出常量应用程序：React.FC=（）=>{
返回(
//此侧边栏将在每条路线上渲染，因为它位于


仪表板


配置


//此BrowserRouter将根据当前URL（例如“localhost:3000/Dashboard”）呈现适当的组件
} />
} />
);
};

请为添加代码mainBody@JatinParmar目前没有任何主体代码。我只是在index.html文件中创建了一个具有该ID的div。（我正在使用create react应用程序创建此应用程序）。我想到的想法是简单地使用元素ID并在itSo中呈现元素，即使对于页脚和页眉这样的组件，在我的App.js文件中呈现它们比在index.js文件中呈现更好吗？按照惯例，最好让index.js尽可能简单，添加共享组件（页眉和页脚）在App.js中，就像我添加了边栏一样。你可以在网上看到很多例子，比如：哦，好吧。谢谢