Как делать редирект при авторизации?

Question

[d2207]

Добрый день! В навбаре имеется две кнопки - логин или логаут. Логаут работает отлично, чего не скажешь о логине. Когда пользователь проходит авторизацию он должен попасть на некую страничку, но остаётся на стр авторизации. Как работает window.location.href = "/additem"? Выглядит так как будто это обычный reload(); без редиректа.
P/S: Это пет-прожект без бекенда с регистрацией и получением прав доступа, поэтому всё это имитирую на фронте.
LOGIN

export function Login() {
    const [username, setUsername] = useState('');
    const [password, setPassword] = useState('');
    
    function onChangeUsername(e) {
        setUsername(e.target.value)
    }

    function onChangePassword(e) {
        setPassword(e.target.value)
    }

    function getToken() {
        const token = Date.now().toString();
        if (username && password) {
            localStorage.setItem('userToken', JSON.stringify(token))
        }
        ChangeLocation()
    }

     function ChangeLocation() {
         window.location.href = 'http://localhost:3000/additem'
     }

    return (...)

LOGOUT

export function Navigbar() {
    const [currentUser, setCurrentUser] = useState(undefined);

    useEffect(() => {
        Authentication();
    });

    function Authentication() {
        setCurrentUser(localStorage.getItem('userToken'));
    }

    function LogOut() {
        localStorage.removeItem('userToken');
        ChangeLocation();
    }

    function ChangeLocation() {
        window.location.reload()
    }

    return (...)

ROUTE

return (
        <Switch>
            <Route exact path="/" render = {() => <Redirect to="/login"/>}/>
            <Route exact path="/login" component={Login}/>
            <Route path="/additem" render={() => isLoggedIn ? <AddItem/> : <Redirect to="/login"/>}/>
            <Route path="/edititem" render={() => isLoggedIn ? <EditUsers/> : <Redirect to="/login"/>}/>
            <Route path="/deleteitem" render={() => isLoggedIn ? <DeleteItem/> : <Redirect to="/login"/>}/>
            <Route exact path="/listOfItem" component={ListOfItems}/>
            <Route path="/listOfItem/:personId" component={ItemPage}/>
        </Switch>
    )

Answer 1

[hzzzzl]

import { Redirect } from "react-router-dom";

export function Login() {
    const [isAuthed, setIsAuthed] = useState(false)     // !

    function getToken() {
        const token = Date.now().toString();
        if (username && password) {
            localStorage.setItem('userToken', JSON.stringify(token))
            setIsAuthed(true)   // !
        }
    }

     if (isAuthed) return <Redirect to="/additem" />   //  !!!

    return (...)
}

Comments

[d2207]

hzzzzl
Использовал Ваш код, в консоли вылез варнинг -

form submission canceled because the form is not connected

. Если убрать строку if (isAuthed) return <Redirect to="/additem" /> то варнинг уходит. Ещё заметил что isAuthed при сабмите формы меняется два раза, т.е. сначала true, потом false. В сети пишут что этот варнинг лечится заменой типа кнопки с сабмита на баттон, мне естественно не помогло, иногда кажется что у меня какой-то другой JS, не тот что у всех

[moody_good]

d2207,

return isAuthed ? (
    <Redirect to="/additem" />
) : (
//....
)