javascript - 重定向后未存储 useState 值

Question

在过去的两天里，我遇到了一些问题，我不确定我做错了什么。
我想实现一个登录页面，在登录后将用户重定向到仪表板。
因为我想在整个应用程序中使用用户名，所以我将值存储在 App.js 中。
该值被传递给 Login.js，在那里我尝试调用 setUsername 函数来更新该值，但重定向后该值再次为空。
用户名的值不应该是用 setUsername 设置的那个吗？
应用.js

const App = () => {
    const [username, setUsername] = useState(null);

    return (
        <div className="site">
            <main>
                <Switch>
                    <Route exact path={'/login'} render={() => <Login username={username} setUsername={setUsername} />} />
                    <Route exact path={'/dashboard/:username'} render={() => <Dashboard username={username} />}/>
                </Switch>
            </main>
        </div>
    );
};

登录.js

const Login = (props) => {
    let username = props.username;
    const [password, setPassword] = useState("");

    function handleSubmit(e) {
        e.preventDefault();
        axiosInstance.post('url', {
            username: username,
            password: password
        }).then(response => {
                props.setUsername(username);
             }
        ).then(() => window.location = `/dashboard/${username}`)
            .catch(error => {
             throw error;
        });
    }

    return (
        <MyForm onSubmit={handleSubmit}>
            <Form.Group controlId="formBasicUser">
                <Form.Label>Username</Form.Label>
                <Form.Control type="text" name="username" value={username} placeholder="Enter username" onChange={(e) => props.setUsername(e.target.value)}/>
            </Form.Group>

            <Form.Group controlId="formBasicPassword">
                <Form.Label>Password</Form.Label>
                <Form.Control type="password" name="password" value={password} placeholder="Password" onChange={e => setPassword(e.target.value)}/>
            </Form.Group>
            <Button variant="primary" type="submit">
                Login
            </Button>
        </MyForm>
    );
};

我也尝试在提交功能中设置用户名，但是...... nada
仪表板.js

const Dashboard = (props) => {
    return (
        <h1>Welcome {props.username}</h1>
    );
};

Answer 1

我认为重定向后用户名为空，因为您使用窗口位置，请尝试使用历史钩子(Hook)

const Login = (props) => {
let username = props.username;
let history = useHistory();
const [password, setPassword] = useState("");

function handleSubmit(e) {
    e.preventDefault();
    axiosInstance.post('url', {
        username: username,
        password: password
    }).then(response => {
            props.setUsername(username);
        }
    ).then(() => history.push(`/dashboard/${username}`))
        .catch(error => {
            throw error;
        });
}

return (
    <MyForm onSubmit={handleSubmit}>
        <Form.Group controlId="formBasicUser">
            <Form.Label>Username</Form.Label>
            <Form.Control type="text" name="username" value={username} placeholder="Enter username" onChange={(e) => props.setUsername(e.target.value)}/>
        </Form.Group>

        <Form.Group controlId="formBasicPassword">
            <Form.Label>Password</Form.Label>
            <Form.Control type="password" name="password" value={password} placeholder="Password" onChange={e => setPassword(e.target.value)}/>
        </Form.Group>
        <Button variant="primary" type="submit">
            Login
        </Button>
    </MyForm>
);};