添加 BrowserRouter 以在 React 中的特定 div 中呈现组件答案

【问题标题】：Adding BrowserRouter to render components in a specific div in React添加 BrowserRouter 以在 React 中的特定 div 中呈现组件
【发布时间】：2019-12-05 06:25:33
【问题描述】：

在这里反应新手。我想使用 React Router 创建一个侧面导航栏，而不是根据单击的任何链接呈现组件。我对如何以及在何处放置浏览器路由器越来越感到困惑。

这是我的 index.js 文件的 sn-p

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

还有一个 ID = mainBody 的元素，我想在其中渲染组件，这些组件取决于我在侧边栏上单击的内容而添加/替换。

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

下面是SideBar组件导入的一个组件SideNav。这会处理路由链接。

<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>

您可以想象，现在当我单击两个链接中的任何一个时，标题组件就会出现在 SideBar 本身中。

我应该进行哪些更改以使标题出现在另一个组件中？我已经看过无数的 sidenav 和路由示例，但我仍然很困惑，因为我尝试制作的内容在结构上有所不同。

提前谢谢你！

【问题讨论】：

请为mainBody添加代码
@JatinParmar 目前没有任何 mainBody 代码。我只是在我的 index.html 文件中创建了一个具有该 ID 的 div。（我正在使用 create-react-app 创建这个应用程序）。我的想法是简单地使用元素 ID 并在其中渲染元素

标签： reactjs react-router

【解决方案1】：

您可能想要更改构建应用程序的方式。约定是只有一个 ReactDOM.render() 来渲染 HOC 组件（例如您的应用程序组件），然后它会根据您在 BrowserRouter 中定义的 Route 来渲染各种子组件强>。

这是一个实际可行的简单结构：

index.html:

<!DOCTYPE html>
<html >
  <body>
    <div id="root"></div>
  </body>
</html>

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';

ReactDOM.render(<App />, document.getElementById('root'));

App.js

import React from 'react';
import { BrowserRouter} from 'react-router-dom';

export const App: React.FC = () => {

  return (
    <div>
        // This sidebard will be rendered on each route, because it's outside of <BrowserRouter>
        <div className="sideBar">
           <ul>
              <li className="st-bottom-line">
                    <Link to="/Dashboard">Dashboard </Link>
              </li>

              <li className="st-bottom-line">
                    <Link to='/Configuration'> Configuration </Link>
              </li>          
           </ul>
        </div>

        // This BrowserRouter will render the proper component based on the current URL (i.g. 'localhost:3000/Dashboard')
        <BrowserRouter>
                  <Route path="/Dashboard" render={(props) => <Heading {...props} name={`Dashboard`} />} />
                  <Route path="/Configuration" render={(props) => <Heading {...props} name={`Configuration`} />} />
        </BrowserRouter>
    </div>
  );
};

【讨论】：

因此，即使对于诸如页脚和页眉之类的组件，在我的 App.js 文件中呈现它们是否比在 index.js 文件中呈现它们更好？
按照惯例，最好让 index.js 尽可能简单，在 App.js 中添加您的共享组件（页眉和页脚），就像我添加边栏一样。你可以在网上看到几十个例子，比如：github.com/eh3rrera/react-router-4-example/blob/master/src/…
哦，好吧。谢谢！