ReactJS新手求助：添加带导航栏的首页并实现登录页路由

嘿，没问题！既然你已经搞定了登录表单，那咱们一步步来完成首页、导航栏和路由的配置，让整个项目能顺畅跳转。

1. 安装路由依赖 #

React官方推荐的路由库是react-router-dom，先在项目根目录执行安装命令：

# npm 安装
npm install react-router-dom

# 或者 yarn 安装
yarn add react-router-dom

2. 创建导航栏组件（Navbar.js） #

这个组件会固定在页面顶部，包含首页和登录页的跳转入口：

// src/components/Navbar.js
import React from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => {
  return (
    <nav style={{ padding: '1rem', background: '#f5f5f5', borderBottom: '1px solid #ddd' }}>
      <Link to="/" style={{ marginRight: '2rem', textDecoration: 'none', color: '#333', fontWeight: 500 }}>
        首页
      </Link>
      <Link to="/login" style={{ textDecoration: 'none', color: '#333', fontWeight: 500 }}>
        登录
      </Link>
    </nav>
  );
};

export default Navbar;

3. 创建首页组件（Home.js） #

这是项目启动后默认展示的页面，先写个简单的示例：

// src/components/Home.js
import React from 'react';

const Home = () => {
  return (
    <div style={{ maxWidth: '1200px', margin: '0 auto', padding: '2rem' }}>
      <h1>欢迎来到项目首页！</h1>
      <p>点击顶部导航栏的「登录」按钮，即可进入登录页面</p>
    </div>
  );
};

export default Home;

4. 整合路由与主入口（App.js） #

修改你的App.js，把路由、导航栏、首页和登录页整合到一起：

// src/App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './components/Home';
import LoginForm from './components/loginform'; // 这里要对应你LoginForm的实际文件路径

function App() {
  return (
    <Router>
      {/* 导航栏会在所有页面顶部显示 */}
      <Navbar />
      <Routes>
        {/* 默认路由：访问根路径时显示首页 */}
        <Route path="/" element={<Home />} />
        {/* 登录页路由：访问/login时显示你的登录表单 */}
        <Route path="/login" element={<LoginForm />} />
      </Routes>
    </Router>
  );
}

export default App;

5. 确认LoginForm组件的Redux连接正确 #

确保你的loginform.js最后是正确导出连接Redux的组件（如果还没写完整的mapStateToProps，可以先留空或者根据需求补充）：

// src/components/loginform.js 末尾部分
const mapStateToProps = (state) => {
  // 示例：如果需要从Redux获取登录状态、错误信息等，在这里定义
  return {
    // isLoading: state.auth.isLoading,
    // loginError: state.auth.error
  };
};

// 连接Redux并导出组件
export default connect(mapStateToProps, { login })(LoginForm);

测试运行 #

现在启动你的React项目：

npm start

项目运行后会自动打开首页，点击顶部导航栏的「登录」按钮，就能直接跳转到你已经写好的登录页面啦！

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