你的位置:首页 > Java教程

[Java教程]通过一个用户管理实例学习react

我们通过一个用户管理实例来学习react-router-dom

这个实例包括9个小组件

App.js 引入组件

Home.js 首页组件

User.js 用户管理组件

  -  UserList.js 用户列表组件

  -  UserAdd.js 用户添加组件

  - UserDetail.js  用户详情组件

Profile.js 个人中心组件

Login.js  用户登录组件

Protected.js 处理登录的组件(我们模拟登录的)

我们先建立一个App组件,作为我们项目引入的组件

import React, {Component} from 'react';//Router 容器,它是用来包裹路由规则的//Route 是路由规则//BrowserRouter基于h5的。兼容性不好//引入react-router-demoimport {HashRouter as Router, Route,Link,NavLink,Switch} from 'react-router-dom';//引入我们需要的组件import Home from "./Home";import User from "./User";import Profile from "./Profile";import Login from "./Login";import Protected from './Protected'//定义一个App组件export default class App extends Component { render() {  //定义一个我们选中的状态  let activeStyle={color:'red'}  return (   <Router>    <div className="container">     <nav className='nav navbar-default'>      <div className="container-fluid">       <a className="navbar-brand">用户管理</a>      </div>      <ul className="nav">       <li className='navbar-nav'><NavLink exact activeStyle={activeStyle} to="/">首页</NavLink></li>       <li className='navbar-nav'><NavLink activeStyle={activeStyle} to="/user">用户管理</NavLink></li>       <li className='navbar-nav'><NavLink activeStyle={activeStyle} to="/profile">个人中心</NavLink></li>      </ul>     </nav>     <div>      {/*Switch是匹配*/}      {/*exact 我们匹配/斜杠时候,就匹配第一个*/}      <Switch>      <Route exact path="/" component={Home}/>      <Route path="/user" component={User}/>       <Protected path="/profile" component={Profile}/>       <Route path="/login" component={Login}/>      </Switch>     </div>    </div>   </Router>  ) }}

App组件使我们引入的组件,在这个组件里面,我们需要注意到最外层的Router

这个是路由容器,我们路由规则Route需要包裹在日期里面

Route包含了两个属性,path 和 component

path指向的路由路径,component指向的是要跳转的组件

我们路由导航,一般是Link和NavLink两个

这两个功能一样,都是路由跳转,但是NavLink有一个属性用来显示跳转选中的样式,activeStyle属性,写显示高亮样式的,接收一个对象{}

在我们路由导航有一个to属性

to属性是我们路由的要跳转的路径

下面是User.js 组件,主要包含两个路由NavLink和Route,和上面一个意思,切换两个组件NavLink和Route

import React, {Component} from 'react'import {Link,Route,NavLink} from 'react-router-dom'import UsersList from './UsersList'import UsersAdd from './UsersAdd'import UserDetail from "./UserDetail";export default class User extends Component { render() {  let activeStyle={color:'red'}  return (   <div className='row'>    <div className="col-sm-3">     <nav>      <ul className="nav nav-stacked">       <li><NavLink activeStyle={activeStyle} to="/user/list">用户列表</NavLink></li>       <li><NavLink activeStyle={activeStyle} to="/user/add">添加用户</NavLink></li>      </ul>     </nav>    </div>    <div className="col-sm-9">     <Route path="/user/list" component={UsersList}></Route>     <Route path="/user/add" component={UsersAdd}></Route>     <Route path="/user/detail/:id" component={UserDetail}></Route>    </div>   </div>  ) }}

 

  -  UserAdd.js 用户添加组件

 

import React, {Component} from 'react'export default class UsersAdd extends Component { handleSubmit=()=>{  let username=this.refs.username.value;  let password=this.refs.password.value;  let user={username,password,id:Date.now()};  let users=JSON.parse(localStorage.getItem('USERS')||"[]");  users.push(user);  localStorage.setItem('USERS',JSON.stringify(users));  this.props.history.push('/user/list') } render() {  /*  * history 用来跳转页面  * location.pathname 用来存放当前路径  * match代表匹配的结果  *  * */  return (   <form onSubmit={this.handleSubmit}>    <div className="form-group">     <label htmlFor="username" className="control-label">      用户名     </label>     <input type="text" className="form-control" ref="username" placeholder="用户名"/>    </div>    <div className="form-group">     <label htmlFor="username" className="control-label">      密码     </label>     <input type="password" className="form-control" ref="password" placeholder="密码"/>    </div>    <div className="form-group">     <input type="submit" className="btn btn-danger" />    </div>   </form>  ) }}

我们将用户添进去的数据,在页面缓存,方便我们用户列表页渲染

localStorage.setItem('USERS',JSON.stringify(users));
缓存完成后跳转到列表详情页面userList
this.props.history.push('/user/list')

 -  UserList.js 用户列表组件

import React, {Component} from 'react'import {Link} from 'react-router-dom'export default class UsersList extends Component { constructor(){  super();  this.state={users:[]} } componentWillMount(){  let users = JSON.parse(localStorage.getItem('USERS') || "[]");  this.setState({users}); } render(){  return (   <ul className="list-group">    {     this.state.users.map((user,index)=>(      <li key={index} className="list-group-item">       <span>用户名:</span>       <Link to={`/user/detail/${user.id}`}>{user.username}</Link>       <span className="btn btn-danger" onClick={()=>{        let users=this.state.users.filter(item=>item.id!=user.id)        this.setState({users});       }}>删除</span>      </li>     ))    }   </ul>  ) }}

componentWillMount()是组件挂载完成后的组件周期函数

在这个钩子函数里面,我们去userAdd存储的USERS数据,然后渲染到页面上去
<Link to={`/user/detail/${user.id}`}>{user.username}</Link>

这里面我们跳转到个人信息详情里面,把每个人的用户id带上

然后我们用户详情页面UserDetail.js 组件

import React, {Component} from 'react'export default class UserDetail extends Component { render() {  // let user=this.props.location.state.user  let users = JSON.parse(localStorage.getItem('USERS')||"[]");  let id = this.props.match.params.id;  let user = users.find(item=>item.id == id);  return (   <table className="table table-bordered">    <thead>    <tr>     <th>ID</th>     <th>用户名</th>     <th>密码</th>    </tr>    </thead>    <tbody>     <tr>     <td>{user.id}</td>     <td>{user.username}</td>     <td>{user.password}</td>     </tr>    </tbody>   </table>  ) }}

 

let id = this.props.match.params.id;

let user = users.find(item=>item.id == id);

通过match里面获取到路由带过来的id

然后判断users里面id相同的那一项

然后渲染到页面上去

,然后我们判断登录,如果没有登录,就去登录,登录后才能看用户管理

import React from 'react';import {Route, Redirect} from 'react-router-dom';//函数组件//把属性对象中的Component属性取出来赋给comp,把其它属性取出来赋给other对象//再把other对象的全部属性取出来赋给Route// component=组件// render函数 当路由匹配的时候,渲染的是render方法的返回值export default function ({component: _comp, ...rest}) { return <Route {...rest} render={  props => localStorage.getItem('login') ? <_comp/> :   <Redirect to={{pathname: '/login', state: {from: props.location.pathname}}}/> }/> return null;}

如果没有登录,我们就进入登录组件,其实我们模拟登录就是设置了一个缓存login为true,模拟权限,真实项目中,我们通过后台接口来限制,路由跳转

import React, {Component} from 'react';export default class Login extends Component { handleClick = ()=>{  localStorage.setItem('login','true');  console.log(this.props);  this.props.history.push(this.props.location.state.from); } render() {  return (   <div>    <button     onClick={this.handleClick}     className="btn btn-primary">登录    </button>   </div>  ) }}

 

 后面,我们首页Hone和Profile两个组件,基本就是展示个人信息的,就是渲染,所以我就没有必要写了!

总体完成,路由嵌套路由,然后通过路由参数分辨路由不同的信息