Question

我刚刚开始使用reactJS，并且我在React中集成了一个HTML管理模板，该模板具有标题，侧边栏，页脚和主要部分的内容。

我有点好奇的是，每当我单击主要部分内容中的链接时，只有特定部分会动态加载，但是当我单击侧边栏中的链接时，整个页面都会重新加载，为什么会这样？下面是我要遵循的代码

App.js

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

import Header from './Components/Header';
import Content from './Components/Content';
import Footer from './Components/Footer';
import Sidebar from './Components/Sidebar';

const App = () => {
    return(
                    <BrowserRouter>
                        <Header/>
                        <Sidebar/>
                        <Content/>
                        <Footer/>
                    </BrowserRouter>
              );
}

export default App;

Header.jsx

import React from 'react';
import logo from '../stack.png';

const Header = () => {
return(
        <nav>
        </nav>
      );
 }

export default Header;

Sidebar.jsx

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

const Sidebar = () => {
  return(
              <aside>
                <div className="main-menu menu-fixed menu-dark menu-accordion menu-shadow" data-scroll-to-active="true">
                  <div className="main-menu-content">
                    <ul className="navigation navigation-main" id="main-menu-navigation" data-menu="menu-navigation">
                      <li style={{'margin': '25px 0 0 0'}} className="active nav-item">
                        <Link to="/dashboard">
                          <i className="ft-home"></i>
                            <span className="menu-title">
                              Dashboard
                            </span>
                        </Link>
                      </li>
                      <li className="nav-item"><a href={void(0)}><i className="ft-plus"></i><span className="menu-title" data-i18n="">Create</span></a>
                        <ul className="menu-content">
                          <li className=" menu-item">
                            <Link to="/create">
                              <span className="menu-title">
                                Create New
                              </span>
                            </Link>
                          </li>
                          <li className=" menu-item">
                            <Link to="/createxyz">
                              <span className="menu-title">
                                Create XYZ
                              </span>
                            </Link>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                </div>
              </aside>
            );
}

export default Sidebar;

Content.jsx

import React from 'react';
import { Switch, Route } from 'react-router-dom';

import Dashboard from './Dashboard';
import Enter from './Enter';
import Enterxyz from './Enterxyz';

const Content = () => {
    return(
                    <Switch>
                        <Route exact path="/" component={Dashboard} />
                        <Route path="/dashboard" component={Dashboard} />
                        <Route path="/create" component={Enter} />
                        <Route path="/createxyz" component={Enterxyz} />
                    </Switch>
              );
}

export default Content;

Footer.jsx

import React from 'react';

function Footer()
  {
    return(
                <footer className="footer footer-static footer-light navbar-border">
                  <p className="clearfix blue-grey lighten-2 text-sm-center mb-0 px-2">
                    <span className="float-md-left d-block d-md-inline-block">&copy; 2020 &nbsp;
                        <a className="text-bold-800 grey darken-2" href="">
                            xyz
                        </a> (All Rights Reserved)
                    </span>
                  </p>
                </footer>
              );
  }

export default Footer;

导入的代码段从'./Enter'输入；

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

const Enter = () => {
    return(
                    <div className="app-content content">
                        <div className="content-wrapper">
                            <div className="content-body">
                                <div className="row">
                                    <div className="col-md-12">
                                        <div className="card" style={{'height': 'auto'}}>
                                            <div className="card-header">
                                                <h4 className="card-title" id="basic-layout-form">Create New Client</h4>
                                                <a className="heading-elements-toggle"><i className="fa fa-ellipsis-v font-medium-3"></i></a>
                                                <div className="heading-elements">
                                                    <ul className="list-inline mb-0">
                                                        <li><Link to="/dashboard">Dashboard</Link></li>
                                                        <li><i className="ft-chevrons-right"></i></li>
                                                        <li><a>Create</a></li>
                                                        <li><i className="ft-chevrons-right"></i></li>
                                                        <li><Link to="/create">Enter New</Link></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
              );
}

export default Enter;

在Enter代码段中，当我单击它们时，有2个链接（面包屑），页面动态加载而无需刷新。

但是，当我单击侧边栏中的链接时，整个页面会重新加载以显示内容，为什么会这样呢？怎么了？

单击链接后，React页面刷新整个页面

0 个答案: