React中点击按钮跳转后无法加载目标JS内容的问题求助

你当前的问题在于直接通过window.location跳转至.js文件——浏览器只会将JS文件当作纯文本展示，不会执行它来渲染页面内容。JS文件必须被HTML页面引入，才能在浏览器中运行并渲染对应的组件。

下面提供两种适配不同项目结构的解决方案：

方案一：React单页应用（推荐） #

如果你的项目是React单页应用，建议使用react-router-dom实现路由跳转，直接切换组件而非跳转文件，这是React项目的标准做法。

步骤1：安装React Router #

在项目根目录执行命令：

npm install react-router-dom

步骤2：修改App.js配置路由 #

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './Navbar';
import Home from './Home'; // 导入登录后要显示的Home组件

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
        {/* 配置路由规则 */}
        <Routes>
          {/* 首页路由 */}
          <Route path="/" element={<div>这是首页默认内容</div>} />
          {/* 登录后的Home页面路由 */}
          <Route path="/home" element={<Home />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

步骤3：修改Navbar组件使用路由跳转 #

import { useNavigate } from 'react-router-dom';

const Navbar = () => {
  const navigate = useNavigate();

  return ( 
    <nav className="navbar">
      <h1>Main Page</h1>
      <div className="links">
        <button onClick={() => navigate('/')}>Home</button>
        <button onClick={() => navigate('/home')}>Log In</button>
      </div>
    </nav>
  );
}

export default Navbar;

步骤4：创建Home组件（Home.js） #

const Home = () => {
  return (
    <div className="home-content">
      <h2>登录成功！这是Home页面的内容</h2>
      {/* 这里可以添加更多登录后的页面元素 */}
    </div>
  );
}

export default Home;

方案二：传统多页面应用 #

如果你需要保持多页面结构，需要创建对应的HTML文件来引入JS，而非直接跳转JS文件。

步骤1：创建home.html文件 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Home Page</title>
  <!-- 引入React相关依赖 -->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <!-- 引入Home.js -->
  <script type="text/babel" src="Home.js"></script>
</body>
</html>

步骤2：修改App.js中的跳转逻辑 #

function App() {
  let LoggedIn = false;
  const setLogInState = (state) =>{
    LoggedIn = state;
    if(state){
      window.location = "home.html"; // 跳转至HTML文件而非JS文件
    }else{
      window.location = "index.html"; // 假设首页是index.html
    }
  }

  const displayMain = () => {
    window.location = "index.html";
  }

  return (
    <div className="App">
      <Navbar logIn={LoggedIn} setLogInState={setLogInState} displayMain={displayMain}/>
    </div>
  );
}

export default App;

步骤3：修改Home.js添加渲染逻辑 #

function Home() {
  return <h2>登录成功，这是Home页面的内容</h2>;
}

// 将组件渲染到页面
ReactDOM.createRoot(document.getElementById('root')).render(<Home />);

内容的提问来源于stack exchange，提问作者JaytheInj