使用 React 管理 LTE 仪表板答案

【问题标题】：Admin LTE dashboard with React使用 React 管理 LTE 仪表板
【发布时间】：2018-08-13 05:54:21
【问题描述】：

我在我的 React 应用程序中使用 ADMIN LTE 仪表板。我在侧边栏组件中添加了某些标签以及字体很棒的图标。但是，当我单击链接时，字体很棒的图标会被刷新（它会重新运行 index.html 中的脚本）。

下面是index.html的代码

 <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="Description" content="Admin Panel">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/AdminLTE.css" />
    <link rel="stylesheet" href="css/_all-skins.min.css" />
    <link rel="stylesheet" href="css/ionicons.min.css" />
    <!-- For material UI  Roboto Font-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    <link rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic" />
    <title>Parcel</title>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/adminlte.min.js"></script>
    <script src="js/jquery.slimscroll.min.js"></script>
    <script src="https://use.fontawesome.com/581d5d54d2.js" ></script>
  </head>
  <body class="hold-transition skin-blue sidebar-mini">
    <div id="root" class="wrapper"></div>
    <noscript>Make sure your Javascript is enabled</noscript>
  </body>
</html>

Sidebar.js

import React, { Component } from 'react';
import './style.css';

export default class SideBar extends Component {
    render() {
        return (
            <aside className="main-sidebar">
                <section className="sidebar">
                    <ul className="sidebar-menu">
                        <li>
                            <a href="/customers">
                                <i className="fa fa-user-circle"></i> <span>dashboard</span>
                            </a>
                        </li>
                        <li>
                            <a href="/customers">
                                <i className="fa fa-asterisk"></i> <span>Settings</span>
                            </a>
                        </li>
                    </ul>
                    </section>
                </aside>
        )
    }
}

【问题讨论】：

问题是由于用于导航的标签。使用而不是。它对我有用...

标签： javascript reactjs adminlte

【解决方案1】：

点击<a>标签告诉浏览器向给定的URL发送一个GET请求并显示响应，这会导致请求之间的页面重新加载，并且在每个页面加载后你的脚本再次被初始化。

如果您只想初始化一次应用程序，那么您需要创建一个单页应用程序 (SPA)。在这种情况下，我强烈建议使用react-router 及其组件，如<Link> 或<NavLink> 来生成特定页面（或状态）的链接。

你可以在react-router的官方文档中找到一些例子：

https://reacttraining.com/react-router/web/guides/philosophy

【讨论】：