在与包含其链接的 div 不同的 div 中加载反应组件答案

【问题标题】：Load react component in a different div than the one containing its link在与包含其链接的 div 不同的 div 中加载反应组件
【发布时间】：2020-03-30 06:16:44
【问题描述】：

我有一个带有页眉、页脚和侧边栏的页面。 App.js文件如下-

const App = () => {

        return(
                <React.Fragment>
                <div id="header">
                        <Header />
                </div>
                <BrowserRouter>
                <div className = "row">

                        <div className="col-2" id="sidebar">
                                <SideBar />
                        </div>
                        <div className="col-10" id="mainBody">
                        </div>

                </div>
                </BrowserRouter>

                <div id="footer">
                        <Footer />
                </div>
                </React.Fragment>

        );

};

export default App;

SideBar.js 文件如下 -

const SideBar = () => <div id="st-sidebar">
                        <BrowserRouter>
                        <ul id ="sidebar" className="nav nav-pills nav-stacked st-white-on-color">

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

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

                        </ul>
                                <Route path="/Dashboard" component={Dashboard} />
                                <Route path="/Configuration" component={Configuration} />
                        </BrowserRouter>
                    </div>


export default SideBar;

当我点击两个链接中的任何一个时，它们会加载到侧边栏中。我想将它加载到 ID = mainBody 的 div 中。我该怎么做呢？我哪里错了？

我是 ReactJS 新手，使用过 create-react-app。

【问题讨论】：

你的<Route path=" 都应该出现在你需要渲染的地方，而不是SideBar。试一试，看看效果如何。

标签： reactjs react-router react-router-component

【解决方案1】：

将您的路线放在主体 div 中，然后您可以使用 Link 导航到该路线。您的组件将呈现它们在代码中放置的位置

const App = () => {

        return(
                <React.Fragment>
                <div id="header">
                        <Header />
                </div>
                <BrowserRouter>
                <div className = "row">

                        <div className="col-2" id="sidebar">
                                <SideBar />
                        </div>
                        <div className="col-10" id="mainBody">
                         <Route path="/Dashboard" component={Dashboard} />
                         <Route path="/Configuration" component={Configuration} />
                        </div>

                </div>
                </BrowserRouter>

                <div id="footer">
                        <Footer />
                </div>
                </React.Fragment>

        );

};

export default App;

【讨论】：

【解决方案2】：

所以链接将在 SideBar 但渲染应该在主体中，所以你需要把路由代码移到主体div上

         <div className="col-10" id="mainBody">
            main body below here only it should render
            <p>
              <Route path="/Dashboard" component={Dashboard} />
              <Route path="/Configuration" component={Configuration} />
            </p>
          </div>

代码

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Link } from "react-router-dom";

import "./styles.css";

const Header = () => <>Header</>;

const SideBar = () => (
  <div id="st-sidebar">
    <BrowserRouter>
      <ul id="sidebar" className="nav nav-pills nav-stacked st-white-on-color">
        <li className="st-bottom-line">
          <Link to="/Dashboard">Dashboard </Link>
        </li>

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

const Footer = () => <>Footer</>;
const Dashboard = () => <>Dashboard</>;

const Configuration = () => <>Configuration</>;

const App = () => {
  return (
    <React.Fragment>
      <div id="header">
        <Header />
      </div>
      <BrowserRouter>
        <div className="row">
          <div className="col-2" id="sidebar">
            <SideBar />
          </div>
          <div className="col-10" id="mainBody">
            main body below here only it should render
            <p>
              <Route path="/Dashboard" component={Dashboard} />
              <Route path="/Configuration" component={Configuration} />
            </p>
          </div>
        </div>
      </BrowserRouter>

      <div id="footer">
        <Footer />
      </div>
    </React.Fragment>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

工作codepen

【讨论】：