Question

我遇到了react-redux和react-router的问题。当我刷新页面变成白色或空白时，一切都很顺利。我在反应和路由器方面真的很新。这是我的routes.js：

    import React from "react";
    import { Route, IndexRoute } from "react-router";

    import Layout from "./components/Layout";
    import userPage from "./components/user/User";
    import rolePage from "./components/role/Role";
    import addUserPage from "./components/user/AddUser";
    import commandPage from "./components/command/Command";
    import addCommandPage from "./components/command/AddCommand";
    import editCommandPage from './components/command/EditCommand';
    import groupPage from "./components/group/Group";
    import executionPage from "./components/execution/Execution";
    import loginPage from "./components/login/Login";
    import dashboardPage from "./components/dashboard/Dashboard";
    import addRolePage from "./components/role/AddRole";
    import editRolePage from "./components/role/EditRole";
    import addGroupPage from "./components/group/AddGroup"

    import requireAuth from "./utils/requireAuth";

    export default (
      <Route path="/" component={Layout}>
        <IndexRoute component={dashboardPage} />
        <Route path="login" component={loginPage} />
        <Route path="users" component={requireAuth(userPage)} />
        <Route path="addUser" component={requireAuth(addUserPage)} />
        <Route path="roles" component={requireAuth(rolePage)} />
        <Route path="commands" component={requireAuth(commandPage)} />
        <Route path="addCommand" component={requireAuth(addCommandPage)} />
        <Route path="editCommand/:commandId" component={requireAuth(editCommandPage)} />
        <Route path="groups" component={requireAuth(groupPage)} />
        <Route path="addGroup" component={requireAuth(addGroupPage)} />
        <Route path="execution" component={requireAuth(executionPage)} />
        <Route path="addRole" component={requireAuth(addRolePage)} />
        <Route path="editRole/:roleId" component={requireAuth(editRolePage)} />
      </Route>
    )

这里也是我的App.js，其中reducer和store就在这里。

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { render } from 'react-dom';
    import { Router, browserHistory } from 'react-router';
    import { Provider } from 'react-redux';
    import thunk from 'redux-thunk';
    import { createStore, applyMiddleware, compose } from 'redux';
    import rootReducer from './rootReducer';
    import setAuthorizationToken from './utils/setAuthorizationToken';
    import jwtDecode from 'jwt-decode';
    import { setCurrentUser } from './actions/authActions';
    import Select from 'react-select';
    import Collapse, { Panel } from 'rc-collapse';
    import Moment from 'react-moment';

    import routes from './routes';

    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    export const store = createStore(rootReducer, composeEnhancers(
      applyMiddleware(thunk)
    ));

    if (localStorage.jwtToken) {
      setAuthorizationToken(localStorage.jwtToken);
      store.dispatch(setCurrentUser(jwtDecode(localStorage.jwtToken)));
    }

    const app = document.getElementById('app');

    ReactDOM.render(
      <Provider store={store}>
        <Router history={browserHistory} routes={routes} />
      </Provider>,
      app);

任何建议和帮助都非常感谢。我也在使用http-server https://www.npmjs.com/package/http-server作为我的开发服务器。也许这会导致问题。我需要配置我的开发服务器

如何修复react redux刷新浏览器？它得到空白/白页

0 个答案: