React基础框架搭建5-路由配置：react+router+redux+axios+Tailwind+webpack

关注

原创最新推荐文章于 2026-08-29 13:53:24 发布 269 阅读 AI 写同款· GEO 优化 ›

Next.js初始架构决策：App Router、SSR/SSG选型与路由设计实战 Next.js作为React生态主流服务端框架，其核心价值在于将路由、数据获取与渲染生命周期深度协同。理解App Router与Pages Router的本质差异，是掌握React Server Components和流式SSR的前提；而SSG、SSR、ISR三种渲染模式的选择，直接决定首屏性能、数据新鲜度与运维成本。在工程落地中，路由结构设计、动态参数预生成、fetch缓存策略及Code Splitting层级控制，共同构成可维护、可预测的前端架构基础。本文结合生产级项目实践，解析从create-next 阅读详情

npm install react-router-dom

1、创建文件
在 src 目录下创建一个 router 文件夹，并在其中创建 AppRouter.jsx 文件

//src/router/AppRouter.jsx

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from '../views/Home/Home'; // 事例页面
import About from '../views/About/About'; // 事例About组件

const AppRouter = () => {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/about" element={<About />} /> 
                {/* 其他路由 */}
            </Routes>
        </Router>
    );
};

export default AppRouter;

2、创建示例页面
在 src/views 目录下创建 Home 文件夹，并在其中创建 Home.jsx 文件

//src/views/Home/Home.jsx

import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => {
    return (
        <div>
            <h1>欢迎来到 ReactBase 框架</h1>
            <p>这是一个基于 React 的前端框架示例。</p>
            <br />
            <hr />
            <br />
            <Link to="/about">
                <button>前往关于页面</button>
            </Link>
        </div>
    );
};

export default Home;

Home添加样式版本：

import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => {
    return (
        <div className="flex flex-col items-center justify-center h-screen">
            <h1 className="text-4xl font-bold">欢迎来到 ReactBase 框架</h1>
            <p className="mt-4 text-lg">这是一个基于 React 的前端框架示例。</p>
            <br />
            <Link to="/about">
                <button className="mt-4 px-4 py-2 bg-blue-500 text-white rounded">前往关于页面</button>
            </Link>
        </div>
    );
};

export default Home;

在 src/views 目录下创建 About 文件夹，并在其中创建 About.jsx 文件

//src/views/About/About.jsx

import React from 'react';

const About = () => {
    return (
        <div>
            <h1>关于我们</h1>
            <p>这是关于页面的内容。</p>
        </div>
    );
};

export default About;

3、引入 Redux Store 和路由组件
更新src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import store from './store';
import AppRouter from './router/AppRouter';
import './index.css';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <AppRouter />
    </Provider>
  </React.StrictMode>
);

reportWebVitals();