react项目实战教程(react项目实战)

全栈程序员站长

发布于 2022-07-28 11:40:21

2.5K0

发布于 2022-07-28 11:40:21

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

文章目录

项目实战前的准备工作
React项目实战(一)
React项目实战(二)
搭建项目的基本页面及外层路由
- 1-1配置基本页面
- 1-2配置路由
- 1-3需要最外层去渲染路由视图
- 1-4需要配置内层App路由
- 1-5 路由的懒加载

项目实战前的准备工作

React基础 React组件 React-Router——Reac路由的学习 React高阶组件及CRA的定制 React中使用Antd组件

React项目实战(一)

React项目实战(二)

搭建项目的基本页面及外层路由

1-1配置基本页面

在项目根目录src文件下创建views文件夹

然后在views文件夹里创建所需要页面, 在相应文件夹下创建index.js文件,这样引入所需页面的时候直接写./login即可,不需要再写./login/index.js

article(index.js / Edit.js) 文章列表文章编辑
dashboard(index.js) 仪表盘
login(index.js) 登录
settings(index.js) 设置
notfound(index.js) 404

最后再创建views/index.js,并在文件里导出页面

import Article from "./article"      //文章列表
import ArticleEdit from "./article/Edit"//文章编辑
import Dashboard from "./dashboard"//仪表盘
import Login from "./login"//登录
import Notfound from "./notfound"//404
import Settings from "./settings"//设置

export { 
   
    Article,
    ArticleEdit,
    Dashboard,
    Login,
    Notfound,
    Settings
}

1-2配置路由

安装路由：yarn add react-router-dom或者npm i react-router-dom
在src文件下新建routes文件夹,在其下新建index.js文件并配置路由

routes/index.js

import  { 
   
    Article,
    ArticleEdit,
    Dashboard,
    Login,
    Notfound,
    Settings
} from "../views"   //引入页面


// /login 页面 /404 页面 
export const mainRoute = [
    { 
   
        pathname:"/login",
        component:Login
    },
    { 
   
        pathname:"/404",
        component:Notfound
    }
]


// /admin/XXX dashboard article articleEdit settings 管理页面
export const admainRoute = [
    { 
   
        pathname:"/admin/dashboard",
        component:Dashboard
    },
    { 
   
        pathname:"/admin/article",
        component:Article,
        exact:true  //配置App内置路由需要exact属性,详情见下文
    },
    { 
   
        pathname:"/admin/article/edit/:id",
        component:ArticleEdit
    },
    { 
   
        pathname:"/admin/settings",
        component:Settings
    },
]

1-3需要最外层去渲染路由视图

在src/index.js文件里渲染路由视图

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { 
   HashRouter as Router,Route,Redirect,Switch} from "react-router-dom"
import { 
   mainRoute} from "./routes"
ReactDOM.render(
  <Router>
    <Switch>
      <Route path="/admin" component={ 
   App}/> //admin主页面的路由 进入到App组件
      { 
   
        mainRoute.map(route=>{ 
   
          return <Route path={ 
   route.pathname} component={ 
   route.component}/>
        })
      }  //遍历login 404 的路由
      <Redirect to="/admin" from="/" exact/>  //重定向 首页为admin
      <Redirect to="/404" />		//如果路径与之前都不匹配,则返回404页面
    </Switch>
  </Router>
  ,
  document.getElementById('root')
);

1-4需要配置内层App路由

在src/App.js文件里渲染路由视图

import React, { 
    Component } from 'react'
import { 
   admainRoute} from "./routes"
import { 
   Route,Redirect,Switch} from "react-router-dom"
export default class App extends Component { 
   
  render() { 
   
    return (
      <Switch>
        { 
   
          admainRoute.map(route=>{ 
   
            return <Route path={ 
   route.pathname} component={ 
   route.component} exact={ 
   route.exact}/>
          })
        }   //admin页面里的路由 dashboard article articleEdit settings
        <Redirect to={ 
   admainRoute[0].pathname} from="/admin" exact/>  //重定向到 admin页面
        <Redirect to="/404" />
      </Switch> 
    )
  }
}

后续发现了问题 /admin/article显示Article中的内容但是/admin/article/edit/2的时候不显示ArticleEdit中的内容解决方法,直接在routes/index.js里面添加一个标志exact然后遍历路由的时候判断是否要添加exact属性

    { 
   
        pathname:"/admin/article",
        component:Article,
        exact:true
    },

    { 
   
              admainRoute.map(route=>{ 
   
                return <Route    exact={ 
   route.exact}/>
              })
    }

1-5 路由的懒加载

下载react-loadable 通过yarn add react-loadable安装在npm官网中搜索查阅使用方法

并新建src/component/loading/index.js文件,当懒加载未完成时,会显示该页面的内容

更改src/views/index.js文件

import Loadable from 'react-loadable';
import Loading from '../components/loading';
//需要将对外的普通组件需要进行懒加载
const Article = Loadable({ 
   
    loader: () => import('./article'),
    loading: Loading,
});
const Dashboard = Loadable({ 
   
    loader: () => import('./dashboard'),
    loading: Loading,
});
const ArticleEdit = Loadable({ 
   
    loader: () => import('./article/Edit'),
    loading: Loading,
});
const Login = Loadable({ 
   
    loader: () => import('./login'),
    loading: Loading,
});
const Notfound = Loadable({ 
   
    loader: () => import('./notfound'),
    loading: Loading,
});
const Settings = Loadable({ 
   
    loader: () => import('./settings'),
    loading: Loading,
});


export  { 
   
    Article,
    ArticleEdit,
    Dashboard,
    Login,
    Notfound,
    Settings
}

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/128605.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年4月1，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript