如何使用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操作會將loginIn狀態更改為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

你可以在這里閱讀。

為什么要使用Redux？

因為Redux用作全局狀態容器，所以這意味着無論您進入哪個頁面，狀態都不會被重置。

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

只需記住一件事，Redux應該是React-Router的父級。
所以應該看起來像這樣

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

僅供參考： Provider是Redux的狀態容器。

如果將<Router>作為<Provider>的父級，則將再次面臨相同的問題。

希望能幫助到你。

Answer 2

這與路由設置完全無關。

我使用的是combineReducers函數，但我沒有意識到它會將所有狀態都包裝到一個父對象中，因此我必須在訪問要訪問的實際對象之前訪問其鍵。