Страница входа в реагирует с использованием реагирующих хуков - PullRequest
Новая
       22

Страница входа в реагирует с использованием реагирующих хуков

0 голосов
/ 04 мая 2019

Я попытался создать пример страницы входа в систему с помощью перехватчиков реакции (useState()).когда пользователь не авторизован, я пытаюсь перенаправить на home.when я использую хуки, которые не перенаправляют. вот мой код 

import React, {useState} from 'react';
import {BrowserRouter as Router, Route, NavLink, Redirect} from 'react-router-dom';
import './App.css';

function App() {
    const [isLogin, changeLogin] = useState(false);
    return (
        <Router>
            <div>
                <ul>
                    <li>
                        <NavLink to="/" exact activeStyle={{'color':'green'}}>Home</NavLink>
                    </li>
                    <li>
                        <NavLink to="/about" activeStyle={{'color':'green'}}>About</NavLink>
                    </li>
                    <li>
                        <NavLink to="/user/stack" activeStyle={{'color':'green'}}>User Stack</NavLink>
                    </li>
                    <li>
                        <NavLink to="/user/overflow" activeStyle={{'color':'green'}}>User Overflow</NavLink>
                    </li>
                </ul>
                <input className="loginButton" type="button" value={isLogin ? 'Logout' : 'Login'} onClick={ () => changeLogin(!isLogin)}/>
                <hr/>
                <Route path="/" exact strict render={() => <Home/>} />
                <Route path="/about" exact strict render={() => <About/>} />
                <Route path="/user/:username" exact strict render={({match}) => {
                    return(isLogin ? (<User username={match.params.username}/>) : (<Redirect to="/" />))
                }} component={User} />
            </div>  
        </Router>
    );
}

function Home(){
    return(
        <div>
            <h2>Home</h2>
        </div>
    )
}
function About(){
    return(
        <div>
            <h2>About</h2>
        </div>
    )
}
const User = ({match}) => {
    return(<h2>Welcome User {match.params.username}</h2>);
}

export default App;

Я использую usestate для обработки состояния, которое сообщает, что пользователь вошел в систему или нет.как этого добиться, используя реакционные крючки.

1 Ответ

0 голосов
/ 04 мая 2019

Удаление component={User} на вашем маршруте должно решить проблему: 

<Route path="/user/:username" exact strict 
       render={({match}) => isLogin ? 
            <User username={match.params.username}/> : 
            <Redirect to="/" />
        } 
 />
...