Question

我在我的React Application中使用了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>
        )
    }
}

Answer 1

单击<a>标记会告诉浏览器将GET请求发送到给定的URL并显示响应，从而导致请求之间重新加载页面，并且在每次加载页面之后，脚本都会重新初始化。

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

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

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

带有React的Admin LTE仪表板

1 个答案: