React-HashRouter：重定向显示空白页面

Question

抱歉，如果这听起来很愚蠢的问题。我试图在用户登录时将用户重定向到应用程序的内容页面。我当前的实现正确地更改了地址栏中的 URL，但不呈现组件并显示空白页面。有什么我在这里失踪的。你能建议我缺少什么吗？

我尝试用谷歌搜索它，但无法正常工作。这是我尝试的一些链接。

1-https://tylermcginnis.com/react-router-programmatically-navigate/

2-https://learnwithparam.com/blog/redirect-route-in-react-router/

3-Programmatically navigate using react router

登录组件

class Login extends React.Component {
    handleSubmit(e) {
        e.preventDefault();
        var value = true;
        localStorage.setItem('userLoggedIn', JSON.stringify(value));

        this.setState({
            toUsers: true
        })

        //this.props.history.push('/users')
    }

    render() {
        if (this.state.toUsers === true) {
            return <Redirect to="/users" />
        }

        return (
            <div className="Login">
                <form onSubmit={this.handleSubmit}>
                    Email
                    <input
                        type="text"
                        value={this.state.email}
                        onChange={this.handleEmailChange}
                    />
                    Password
                    <input
                        type="text"
                        value={this.state.password}
                        onChange={this.handlePasswordChange}
                    />
                    <button>
                        Login
                    </button>
                </form>
            </div>
        );
    }
}

export default Login;

应用组件：

import React, { Component } from 'react';
import { BrowserRouter, HashRouter, Switch, Route } from 'react-router-dom';
import Navigation from './common/Navigation';
import Users from './users/Users.jsx';
import Roles from './roles/Roles.jsx';
import ProtectedRoute from './authentication/ProtectedRoute.jsx';


export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {  
    return <Navigation>
      <Switch>
        <Route exact path="/users" component={Users} />
        <Route exact path="/roles" component={Roles} />
        <Route render={() => <div>Not Found</div>} />
      </Switch>
    </Navigation>
  }
}

决定是否显示登录页面或应用程序的内容页面的组件

export default class AppAuthenticated extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            email: "",
            password: "",
            toUsers: false,
            isUserLoggedIn: false
        };
    }

    componentDidMount() {
        const isUserLoggedIn = JSON.parse(localStorage.getItem('userLoggedIn'));
        this.setState({
            isUserLoggedIn: isUserLoggedIn
        });
    }

    render() {
        return (
            <>
                {this.state.isUserLoggedIn ? (
                    <App />
                ) : (
                        <Login />
                    )}
            </>
        );
    }
}

渲染应用的主应用组件

import React from 'react'
import ReactDOM from "react-dom";
import App from './pages/App'
import { BrowserRouter, HashRouter, Switch, Route } from 'react-router-dom';
import PropTypes from "prop-types";
import { withRouter } from "react-router";
import Login from './pages/authentication/Login.jsx';
import AppAuthenticated from './pages/authentication/AppAuthenticated.jsx';

ReactDOM.render(
    <HashRouter>
        <AppAuthenticated />
    </HashRouter>,
    document.getElementById("root")
);

预期行为：当用户成功登录时，他们应该被重定向到我已经定义了登录用户可以访问的所有路由的“应用程序”组件

Answer 1

在您的 app.js 中，将一个 prop 传递给您的登录组件，该组件可以更改容器状态以呈现您的内容页面。

setLoggedIn = ()=>{
    this.setState({isUserLoggedIn: true});
}

render() {
    return (
            <>
            {this.state.isUserLoggedIn ? (
                <App />
            ) : (
                <Login loginSuccess={this.setLoggedIn} />
                )}
        </>
    );
}

然后在您的登录组件中...

handleSubmit(e) {
    e.preventDefault();
    var value = true;
    localStorage.setItem('userLoggedIn', JSON.stringify(value));

    this.setState({
        toUsers: true
    })
    this.props.loginSuccess();
    //this.props.history.push('/users')
}

Answer 2

setLoggedIn = ()=>{
  this.setState({isUserLoggedIn: true});
}

render() {
   return (
         <>
          {this.state.isUserLoggedIn ? (
            <App />
        ) : (
            <Login loginSuccess={this.setLoggedIn} />
            )}
    </>
  );
}

这是你的传递道具中缺少的@maddy