浏览器页面不会在反应项目中自动刷新

Question

import React from "react";
import "./App.css";

function SecretComponent() {
  return <p>Secret2 information for authorised users only </p>;
}

function RegularComponent() {
  return <p>Everyone1 can see this component</p>;
}

function App(props) {
  if (props.authorized) {
    return <SecretComponent />;
  } else {
    return <RegularComponent />;
  }
}

import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";

ReactDOM.render(<App authorized={false} />, document.getElementById("root"));

在我在 Visual Studio Code 中的 react 项目中，当我进行更改时，浏览器页面仅在 App.js 文件中进行更改时刷新，但在 index.js 文件中进行更改时不会刷新。我必须手动刷新页面才能显示更改。

Answer 1

试试这个：

1. npm install react-hot-loader

2. 在 app.js 中，添加 import { hot } from 'react-hot-loader/root' 。

3. 像这样在导出export default hot(App) 时包装App 组件。