透過一個使用者管理實例學習react-router-dom
- 一个新手原創
- 2017-10-12 09:34:491536瀏覽
我們透過一個使用者管理實例來學習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>
<p className="container">
<nav className='nav navbar-default'>
<p className="container-fluid">
<a className="navbar-brand">用户管理</a>
</p>
<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>
<p>
{/*Switch是匹配*/}
{/*exact 我们匹配/斜杠时候，就匹配第一个*/} <Switch>
<Route exact path="/" component={Home}/>
<Route path="/user" component={User}/>
<Protected path="/profile" component={Profile}/>
<Route path="/login" component={Login}/>
</Switch>
</p>
</p>
</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 ( <p className='row'>
<p 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>
</p>
<p 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>
</p>
</p> )
}
}
# - 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}>
<p className="form-group">
<label htmlFor="username" className="control-label">
用户名 </label>
<input type="text" className="form-control" ref="username" placeholder="用户名"/>
</p>
<p className="form-group">
<label htmlFor="username" className="control-label">
密码 </label>
<input type="password" className="form-control" ref="password" placeholder="密码"/>
</p>
<p className="form-group">
<input type="submit" className="btn btn-danger" />
</p>
</form> )
}
}
我們將使用者增加的數據，在頁面緩存，方便我們使用者清單頁面渲染
<span style="font-size: 14pt;">localStorage.setItem('USERS',JSON.stringify(users));</span><br/><span style="font-size: 14pt;">缓存完成后跳转到列表详情页面userList</span><br/><span style="font-size: 14pt;">this.props.history.push('/user/list')</span>
- 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數據，然後渲染到頁面上去
9652a14b13a604fe13d387155c935dda{user. username}06f735b502bd5273dad825215f7c405b
這裡面我們跳到個人資料詳情裡面，把每個人的使用者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 (
<p>
<button
onClick={this.handleClick}
className="btn btn-primary">登录
</button>
</p>
)
}
} 後面，我們首頁Hone和Profile兩個元件，基本上就是展示個人資訊的，就是渲染，所以我就沒有必要寫了！ 總體完成，路由嵌套路由，然後透過路由參數分辨路由不同的資訊以上是透過一個使用者管理實例學習react-router-dom的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：es6語法物件擴充的例子下一篇：es6語法物件擴充的例子