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

复制代码

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();