React实战项目02：打造电商系统底部导航和router

2024-01-10 20:33:39

React电商系统：打造底部导航和路由功能

一、项目结构

在动手之前，让我们先了解一下项目的结构：

|- src
| |- components
| | |- FooterNav.js
| |- pages
| | |- Home.js
| | |- ProductList.js
| | |- ProductDetail.js
| |- App.js

二、利用Flex布局实现导航栏静态效果

第一步，我们创建底部导航栏的静态效果。利用Flex布局，在FooterNav.js组件中添加以下代码：

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

const FooterNav = () => {
  return (
    <nav className="footer-nav">
      <Link to="/">首页</Link>
      <Link to="/products">产品列表</Link>
      <Link to="/cart">购物车</Link>
      <Link to="/profile">个人中心</Link>
    </nav>
  );
};

export default FooterNav;

接下来，在App.js组件中，将FooterNav组件添加到页面底部：

import React from 'react';
import FooterNav from './components/FooterNav';

const App = () => {
  return (
    <div>
      {/* 页面内容 */}
      <FooterNav />
    </div>
  );
};

export default App;

三、配置主页的子路由

下一步，我们配置主页的子路由。在App.js组件中，添加以下代码：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import FooterNav from './components/FooterNav';
import Home from './pages/Home';
import ProductList from './pages/ProductList';
import ProductDetail from './pages/ProductDetail';
import Cart from './pages/Cart';
import Profile from './pages/Profile';

const App = () => {
  return (
    <Router>
      <div>
        {/* 页面内容 */}
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/products" component={ProductList} />
          <Route path="/products/:id" component={ProductDetail} />
          <Route path="/cart" component={Cart} />
          <Route path="/profile" component={Profile} />
        </Switch>
        <FooterNav />
      </div>
    </Router>
  );
};

export default App;