App.js 登录路由不显示 React.js/Redux

如何解决App.js 登录路由不显示 React.js/Redux

正在使用 Redux 处理 MERN 堆栈项目，我正在尝试显示我的登录/注册信息，但我相信我在客户端的 App.js 和实用程序部分搞砸了。现在当我运行应用程序时，我得到一个空白的白屏，显示的路由是 localhost:3000/#/

App.js

import React from 'react';
import { AuthRoute,ProtectedRoute } from "../utilities/route_util";
import { Switch,withRouter,Route,Redirect } from "react-router-dom";

import LoginRegistration from './auth/LoginRegistration';

// added props for styling based on pathname
const App = (props) => {
    return(
        <div>
            <Switch>
                <AuthRoute exact path="/login" component={LoginRegistration} />
                <Route exact path='/*' render={() => <Redirect to={{ pathname: "/" }} />} />
            </Switch>
        </div>
    )
};

export default withRouter(App);

Root.js

import React from 'react';
import { Provider } from 'react-redux';
import { HashRouter } from 'react-router-dom';
import App from './App';

const Root = ({ store }) => (
    <Provider store={store}>
        <HashRouter>
            <App />
        </HashRouter>
    </Provider>
);

export default Root;

route-util 也可能是一个错误点，这就是我根据用户是否登录确定将生成哪个路由的地方

route_util.js

import React from 'react';
import { connect } from 'react-redux';
import { Route,Redirect,withRouter } from 'react-router-dom';

const Auth = ({ component: Component,path,loggedIn,exact }) => (
    <Route path={path} exact={exact} render={(props) => (
        !loggedIn ? (
            <Component {...props} />
        ) : (
                <Redirect to="/" />
            )
    )} />
);

const Protected = ({ component: Component,...rest }) => (
    <Route
        {...rest}
        render={props =>
            loggedIn ? (
                <Component {...props} />
            ) : (
                    <Redirect to="/login" />
                )
        }
    />
);

const mapStateToProps = state => (
    { loggedIn: state.auth.isAuthenticated }
);

export const AuthRoute = withRouter(connect(mapStateToProps)(Auth));

export const ProtectedRoute = withRouter(connect(mapStateToProps)(Protected));

index.js

import React from 'react';
import ReactDOM from 'react-dom';

import Root from './components/Root';
import configureStore from './store';

import jwt_decode from 'jwt-decode';
import { setAuthToken } from './utilities/auth';

import { logout } from './actions/auth';

document.addEventListener('DOMContentLoaded',() => {
    let store;

    if (localStorage.jwtToken) {

        setAuthToken(localStorage.jwtToken);

        const decodedUser = jwt_decode(localStorage.jwtToken);

        const preloadedState = { auth: { isAuthenticated: true,user: decodedUser } };

        store = configureStore(preloadedState);

        const currentTime = Date.now() / 1000;

        if (decodedUser.exp < currentTime) {
            store.dispatch(logout());
            window.location.href = '/';
        }
    } else {
        store = configureStore({});
  }
  
    const root = document.getElementById('root');
    ReactDOM.render(<Root store={store} />,root);
});

store.js

import { createStore,applyMiddleware } from "redux";
import thunk from "redux-thunk";
import RootReducer from "./reducers/index";

const configureStore = (preloadedState = {}) => (
    createStore(
        RootReducer,preloadedState,applyMiddleware(thunk)
        )
    );

export default configureStore;