在与包含 link 的组件不同的 div 中加载 React 组件

Question

我有一个带有页眉、页脚和边栏的页面。 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。

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

Answer 2

因此链接将位于侧边栏，但渲染应位于主体中，所以你需要把路线代码移到主体上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

在与包含 link 的组件不同的 div 中加载 React 组件

Load react component in a different div than the one containing its link

reactjs

react-router

react-router-component