Wir lernen React-Router-Dom anhand eines Benutzerverwaltungsbeispiels
Dieses Beispiel enthält 9 kleine Komponenten
App. js führt Komponenten ein
Home.js-Homepage-Komponente
User.js-Benutzerverwaltungskomponente
- UserList.js Benutzerlistenkomponente
- UserAdd.js Benutzerhinzufügenkomponente
- UserDetail.js Benutzerdetailskomponente
Profile.js Personal Center-Komponente
Login.js Benutzeranmeldekomponente
Protected.js verwaltet die Anmeldekomponente ( wir simulieren die Anmeldung)
Wir erstellen zunächst eine App-Komponente als eine in unserem Projekt eingeführte Komponente
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-Komponente Lassen Sie uns die Komponente vorstellen . In dieser Komponente müssen wir auf den äußersten Router achten
Dies ist der Routing-Container, der in das Datum eingebunden werden muss
Route enthält zwei Attribute, Pfad und Komponente
Pfad zeigt auf den Routing-Pfad und Komponente zeigt auf die zu überspringende Komponente
Unsere Routennavigation ist im Allgemeinen Link und NavLink
Diese beiden Funktionen sind gleich, es handelt sich um Routensprünge , aber NavLink verfügt über ein Attribut , das zum Anzeigen des ausgewählten Sprungstils verwendet wird. Das Attribut activeStyle, das zum Anzeigen des hervorgehobenen Stils geschrieben wird, empfängt ein Objekt {}
In unserer Route Navigation gibt es ein to-Attribut
to-Attribut ist der Pfad, der auf unserer Route übersprungen werden soll
Das Folgende ist die User.js-Komponente, die hauptsächlich zwei Routen enthält, NavLink und Route. Es hat die gleiche Bedeutung wie oben, vertauschen Sie die beiden Komponenten NavLink und 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 vom Benutzer hinzugefügte Komponente
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> ) } }
Wir speichern die vom Benutzer auf der Seite hinzugefügten Daten zwischen, um die Darstellung unserer Benutzerliste zu erleichtern Seite
<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 Benutzerlistenkomponente
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() ist die Komponentenzyklusfunktion nach der Komponente mounted
In dieser Hook-Funktion gehen wir zu den USERS-Daten, die in userAdd gespeichert sind, und rendern sie dann auf der Seite
{user.username}
Hier springen wir zu den persönlichen Datendetails und bringen alle Benutzer id
Dann ist unsere Benutzerdetailseite UserDetail.js-Komponente
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);
Rufen Sie die von der Route mitgebrachte ID ab durch Übereinstimmung
Dann das Element mit derselben ID in den Benutzern ermitteln
und es dann auf der Seite rendern
, dann ermitteln wir den Login. Wenn Sie nicht angemeldet sind, melden Sie sich an. Erst nach dem Anmelden können wir die Benutzerverwaltung sehen.
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; }
Wenn Sie nicht angemeldet sind, werden wir eingegeben Tatsächlich simulieren wir die Anmeldung und richten sie ein. In einem echten Projekt verwenden wir die Backend-Schnittstelle, um Routing-Sprünge zu begrenzen. Unsere Homepage-Komponenten Hone und Profile zeigen im Grunde persönliche Informationen an. Es handelt sich lediglich um eine Darstellung, sodass ich sie nicht schreiben muss!
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> ) } }
Das obige ist der detaillierte Inhalt vonLernen Sie React-Router-Dom anhand eines Benutzerverwaltungsbeispiels kennen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!