通過一個用戶管理實例學習react-router-dom知識
阿新 • • 發佈：2017-10-10
函數 parse spa 用戶管理 匹配 對象 有一個 dom nds
我們通過一個用戶管理實例來學習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‘;
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兩個組件，基本就是展示個人信息的，就是渲染，所以我就沒有必要寫了！
總體完成，路由嵌套路由，然後通過路由參數分辨路由不同的信息
通過一個用戶管理實例學習react-router-dom知識