사용자 관리 예제를 통해 React-Router-dom을 배워보세요

사용자 관리 예제를 통해 React-router-dom을 학습합니다

이 예제에는 9개의 작은 구성 요소가 포함되어 있습니다

App.js 소개 구성 요소

Home.js 홈페이지 구성 요소

js 사용자. 관리 구성 요소

- UserList.js 사용자 목록 구성 요소

- UserAdd.js 사용자 추가 구성 요소

- UserDetail.js 사용자 세부 정보 구성 요소

Profile.js 개인 센터 구성 요소

로그인 .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:&#39;red&#39;}        return (            <Router>
                <p className="container">
                    <nav className=&#39;nav navbar-default&#39;>
                        <p className="container-fluid">
                            <a className="navbar-brand">用户管理</a>
                        </p>
                        <ul className="nav">
                            <li className=&#39;navbar-nav&#39;><NavLink exact activeStyle={activeStyle} to="/">首页</NavLink></li>
                            <li className=&#39;navbar-nav&#39;><NavLink activeStyle={activeStyle} to="/user">用户管理</NavLink></li>
                            <li className=&#39;navbar-nav&#39;><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는 라우팅 경로를 가리키고, 구성요소는 점프할 구성요소를 가리킵니다.

우리의 경로 탐색은 일반적으로 Link와 NavLink입니다. 이 두 기능은 동일하며 둘 다 라우팅 점프입니다. , 하지만 NavLink에는 점프에 의해 선택된 스타일을 표시하는 데 사용되는

속성과 강조 표시된 스타일을 표시하기 위해 작성된 activeStyle 속성이 있으며 객체를 수신합니다. {}

경로 탐색에는

to

Attributeto 속성은 우리의 라우트에 대한 점프 경로입니다

다음은 주로 NavLink와 Route 두 가지 라우트를 포함하는 User.js 컴포넌트입니다. 위의 두 구성 요소 전환 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:&#39;red&#39;}        return (            <p className=&#39;row&#39;>
                <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(&#39;USERS&#39;,JSON.stringify(users));</span><br/><span style="font-size: 14pt;">缓存完成后跳转到列表详情页面userList</span><br/><span style="font-size: 14pt;">this.props.history.push(&#39;/user/list&#39;)</span>

- UserList.js User List Component

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>        )
    }
}

comComponentWillMount()는 컴포넌트가 마운트된 후의 컴포넌트 순환 함수입니다.

이 후크 함수에서는 userAdd에 저장된 USERS 데이터로 이동한 다음 이를 page

{user.username}

여기에서 개인정보 세부정보로 이동하여 가져옵니다. 모든 사람의 사용자 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를 가져옵니다

그런 다음 사용자에서 동일한 ID를 가진 항목을 결정합니다

그런 다음 페이지로 렌더링합니다

그런 다음 로그인을 결정합니다. 로그인하지 않은 경우 로그인하면 됩니다. 로그인한 후에만 사용자 관리를 볼 수 있습니다

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

로그인하지 않은 경우 실제로 로그인을 시뮬레이션할 때 로그인 구성 요소를 입력합니다. , 캐시 로그인을 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!