1.项目创建和组件安装
创建项目 npx create-react-app myapp
#antd
npm i antd
指定安装固定antd版本: npm i antd@2.10.4 —save
(在 node_modules同级目录下)
#路由
npm i react-router-dom
搭建目录结构
首先建立两个文件 一个pages 保存页面信息 一个components 存放组件信息
在pages 里面创建一个登录页面 Login.js ,在创建一个所有管理后台的页面叫做admin 。
admin 里面包括商品管理页面,取名为products ,里面还包含了列表页 LIst.js ,和编辑页面 Edit.js,这样我们就有了三个页面
List.js Edit.js Login.js
接着为了让后台管理界面看着好看,所以创建一个文件dashboard,创建一个看板页面 index.js
接着写一个简单的页面效果
这里推荐一个插件
ES7 React/Redux/GraphQL/React-Native snippets
能够快捷的创建组件 输入rfce
测试一下页面 ,在创建的js文件里添加组件
比如login.js里添加代码
import React from 'react'
function Login() {
return (
<div>
<h1>这是首页</h1>
</div>
)
}
export default Login
其他几个js文件也添加组件进行测试
我们知道一个后台管理 分为上,左,右三块内容 ,上面一般存放logo ,左边是一个树形结构,右面是一个内容区域
如果要使用路由,需要在最外层引入路由,在Index.js文件(React 里的入口文件)
import {HashRouter as Router} from 'react-router-dom' ;
用到了{Switch,Route}
先写两个路由 ,接着看路由效果
<Router>
<Switch>
<Route path = '/login' component ={Login}/>
<Route path ='/admin/products' component ={List}/>
</Switch>
</Router>
而在实际开发的时候,我们一般会配置路由文件,首先在src里面创建一个新的文件夹叫做routes表示路由文件,在这里面创建一个index.js,在这个index.js 应该写什么东西呢?
这里我们要把路由分为两类 :
1.登录或者404这类的,页面找不到,属于一类
2.我们需要验证,比如管理后台的页面,需要验证之后才能访问的 。
export const mainRoutes = [{
path: '/login',
component: Login
}]
export const adminRoutes = [{
path: '/admin/dashboard',
component: Index,
},
{
path: '/admin/products',
component: List,
exact: true,
},
{
path: '/admin/products/edit/:id?',
component: Edit,
}]
上面的代码中发现 '/admin/products
'路径地址有重复的,就加入一个 exact: true
精准匹配属性 ,这就是一个简单的路由配置
接着配置主入口,将路由配置引入
我们还要创建一个404 页面 ,在pages文件下创建一个PageNotFound.js 来处理我们很多时候由于页面找不到
import React from 'react'
function PageNotFound() {
return (
<div>
<h1>404</h1>
</div>
)
}
export default PageNotFound
同时在路由配置里面接着添加一个路径
export const mainRoutes = [{
path: '/login',
component: Login
}, {
path: '/404',
component: PageNotFound
}]
接着在我们的入口文件里面做一个简单的路由配置
首先Switch组件先处理的路由是我们主要的路由(也就是第一类路由)
这里利用循环我们的每一个路由
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { mainRoutes } from './routes';
import 'antd/dist/antd.css'
import {HashRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
import App from './App'
ReactDOM.render(
<Router>
<Switch>
<Route path = '/admin' render ={routeProps => <App {...routeProps} />}/>
{
mainRoutes.map((route)=>{
return <Route key ={route.path} {...route}></Route>
})
}
<Redirect to = '/404'/>
</Switch>
</Router>,
document.getElementById('root')
);
{
mainRoutes.map((route)=>{
return <Route key ={route.path} {...route}></Route>
})
}
这个key 属性由于循环需要写 ,{…route} 为ES6的解构赋值 ,不使用的应该这样编写
path ={route.path}
component ={route.component}
写完之后就意味着我们配置了两个页面,一个 Login.js和一个404页面
这里我们引入一个新的组件重定向
< Redirect to =’/404’> 当我们找不到页面的时候就到404页面
接着我们写管理后台的页面
当我们访问到 path= ‘/admin’ 时 ,添加一个render 属性 ,然后让我们所有的管理后台的页面,都走APP这个组件 ,再把我们的路由属性传过去 ,这就意味着,当我们访问所有的以admin组件开头的路由时,我们都用APP组件来渲染我们的页面
<Route path="/admin" render={routeProps => <App {...routeProps} />} />
打开APP.js 进行修改 APP.js是我们的主页面 ,需要用到路由 ,这里循环我们管理后台的路由,需要引入adminRoute
{adminRoutes.map(route => {
return (
<Route
key={route.path}
path={route.path}
exact={route.exact}
render={routeProps => {
return <route.component {...routeProps} />;
}}
/>
);
})}
在 APP组件里写入一个<h1>
看看最后的效果
输入的路径为admin时都会经过App组件
render属性能使你便捷的渲染内联组件或是嵌套组件,你可以给这个属性传入一个函数,当路由的路径匹配时调用。同时,render属性也会接受所有由route传入的所有参数
接着如果我们在admin 里面找不到时,也返回一个404
这就是管理后台的路由配置 ,如果之后需要新增路由,我们只需要在 routes文件下的index.js 里面新增一个路由就好了 ,就会在APP组件里面渲染出来