如何使用 React Router 4 配置私有路由

Question

我有以下私有路由组件的代码。

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

class PrivaetRoute extends React.Component {

    render() {
        const {component: Component, ...rest} = this.props;

        return (
            <Route
                {...rest}
                render={props => this.props.loggedIn ? (
                    <Component {...props}/>
                ) : (
                    <Redirect
                        to={{
                            pathname: '/',
                            state: {from: this.props.location},
                        }}
                    />
                )}
            />
        )
    }
}

function mapStateToProps(state) {
    return {
        loggedIn: state.loggedIn
    }
}

export default connect(mapStateToProps)(PrivaetRoute);

我有以下呈现不同路由的应用程序组件代码

import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Reboot from 'material-ui/Reboot';

/**
 * Local
 * */

import IndexPage from '../pages/Index';
import DashboardPage from '../pages/Dashboard';
import PrivateRoute from '../containers/PrivateRoutes';

export default class App extends React.Component {

    render() {
        return (
            <div>
                <BrowserRouter>
                    <div>
                        <Reboot/>
                        <Switch>
                            <Route exact path="/" component={IndexPage}/>
                            <PrivateRoute path="/dashboard" component={DashboardPage}/>
                        </Switch>
                    </div>
                </BrowserRouter>
            </div>
        );
    }
}

我设计登录系统的方式是，当身份验证完成时，我的 redux 操作将 loggedIn 状态更改为 true。我已经使用 chrome 开发人员工具检查 loggedIn 状态确实被设置为 loggedIn:true；但是，当我将 url 更改为 /dashboard 时，所有状态都会刷新（甚至是 redux 状态），我会被重定向到 /。我做错了什么？

** 编辑 redux 容器

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import reduxThunk from 'redux-thunk';
import {composeWithDevTools} from 'redux-devtools-extension';

import App from './components/App';
import reducers from './reducers';

const store = createStore(reducers, {}, composeWithDevTools(applyMiddleware(reduxThunk)));

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.querySelector('#root')
);

Answer 1

你应该使用 Redux

你可以阅读它 here。

为什么要使用 Redux？

因为 Redux 作为一个全局状态容器，这意味着无论你去哪个页面，状态都不会被重置。

如何在 React-Router 中正确使用 Redux？

记住一件事，Redux 应该是 React-Router 的父级。
所以它应该看起来像这样

<Provider>
    <Router>
        <YourApp/>
    </Router>
</Provider>

仅供参考：Provider 是 Redux 的状态容器。

如果您将 <Router> 作为 <Provider> 的父级，您将再次面临同样的问题。

希望对您有所帮助。

Answer 2

与路由设置完全没有关系。

我正在使用 combineReducers 函数，但我没有意识到它将所有状态包装到一个父对象中，所以我必须在访问我想要访问的实际对象之前访问它的键。

如何使用 React Router 4 配置私有路由

How to configure private routes with react router 4

javascript

reactjs

react-router-v4

你应该使用 Redux

为什么要使用 Redux？

如何在 React-Router 中正确使用 Redux？