Question

我尝试使用react钩子（useState()）在react中做示例登录页面。当用户未登录时，我尝试重定向到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处理告诉用户是否登录的状态。如何使用react钩子实现这一目标。

Answer 1

删除路线上的component={User}应该可以解决问题：

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

使用react hooks中的登录页面

1 个答案: