好客租房项目

src/router/index.js

import Home from "../views/Home"
import Nd from "../views/Nd"
import { Navigate } from 'react-router-dom'
import Msg from "../views/Msg"
import My from '../views/My'
import {lazy} from 'react'
import HomeView from "../views/Home/HomeView"
import Cities from "../views/Cities"
const Map = lazy(()=>import("../views/Map"))  
const Detail = lazy(()=>import("../views/Detail")) 
const Login = lazy(()=>import("../views/Login"))
const Add = lazy(()=>import( "../views/Rent/Add"))
const Poup = lazy(()=>import( "../views/Poup"))
const Favorate = lazy(()=>import("../views/Favorate"))
const Search = lazy(()=>import("../views/Rent/Search"))

const routes = [
    {
        path: '/',
        element: <Navigate to='/home'></Navigate>
    },
    {
        path: '/home',
        element: <Home />,
        children: [
            {
                path: 'index',
                element: <HomeView />
            },
            {
                path: 'list',
                element: <Nd />
            },
            {
                path: 'news',
                element: <Msg />
            },
            {
                path: 'my',
                element: <My />
            }
        ]
    },
    {
        path: '/cities',
        element: <Cities />
    },
    {
        path: '/map',
        element: <Map />
    },
    {
        path:'/detail/:id',
        element:<Detail/>
    },
    {
        path:'/login',
        element:<Login/>
    },
    {
        path:'/rent',
        children:[
            {
                path:'add',
                element:<Add/>
            },
            {
                path:'search',
                element:<Search/>
            }
        ]
    },
    {
        path:'/poup',
        element:<Poup/>
    },
    {
        path:'/favorate',
        element:<Favorate/>
    }
]
export default routes

src/service/config.js

const devBaseURL = "http://localhost:8080";
const proBaseURL = "生产地址";
// set NODE_ENV=development
export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseURL: proBaseURL;

export const TIMEOUT = 5000;

 src/service/request.js

import axios from 'axios';

import { BASE_URL, TIMEOUT } from "./config";

const instance = axios.create({
  baseURL: BASE_URL,
  timeout: TIMEOUT
});

instance.interceptors.request.use(config => {
  // 1.发送网络请求时, 在界面的中间位置显示Loading的组件

  // 2.某一些请求要求用户必须携带token, 如果没有携带, 那么直接跳转到登录页面
  let token = JSON.parse(sessionStorage.getItem('token'))
  if(token){
    config.headers.authorization = token
  }
  // 3.params/data序列化的操作
  return config;
}, err => {
  console.log(err);
});

instance.interceptors.response.use(res => {
  return res.data;
}, err => {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        console.log("请求错误");
        break;
      case 401:
        console.log("未授权访问");
        break;
      default:
        console.log("其他错误信息");
    }
  }
  return err;
});

export default instance;

src/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>

);

src/App.js

import React, { Suspense } from 'react'
import { useRoutes, useLocation } from 'react-router-dom'
import router from './router'
import './App.css'
import './views/My/fonts/iconfont.css'
//动画效果
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import { DotLoading } from 'antd-mobile'
export default function App() {
  let location = useLocation();
  let element = useRoutes(router, location);
  return (
    <div>
      <Suspense fallback={<DotLoading></DotLoading>}>
        <TransitionGroup >
          <CSSTransition key={location.key} timeout={1000} classNames="fds">
            {element}
          </CSSTransition>
        </TransitionGroup>
      </Suspense>
    </div>
  )
}

src/App.css

/* body {
    margin: 0;
    padding: 0;
    background-color: #f5f5f9;
    position: relative;
}
.app {
    height: 100vh;
    display: flex;
} */
.bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: white;
}

body {
    margin: 0;
    padding: 0;
    background-color: #f5f5f9;
    position: relative;
    width: 100%;
}

.app {
    height: 100%;
    display: flex;
}

/* 将要进入的页面从无到有，经过0.8s从右侧以渐变形式移动到可视页 */
.fds-enter {
    opacity: 0;
    transform: translate(100%, 0);
}

.fds-enter-active {
    opacity: 1;
    transform: translate(0, 0);
    transition: 800ms ease-out;
}

/* 讲要移走的页面设置为透明，从中间移动到左侧 */
.fds-exit {
    opacity: 0;
    transform: translate(0, 0);
}

.fds-exit-active {
    opacity: 0;
    transform: translate(-100%, 0);
}