Javascript 在更改redux应用商店状态后，如何重定向到react应用程序中的另一个页面？

我有一个react项目，我正在使用redux来管理状态。我有一个reducer（

authReducer

）用来设置（

isAuthenticated

）的布尔值，还有一个受保护的路由组件（

ProtectedRoute.js

），我在其中检查该值的状态。如果设置为false，则将客户端重定向到登录组件（

login.js

）。如果（

isAuthenticated

）设置为true，我应该能够浏览所有链接。路由本身由组件（

Routes.js

）管理

authReducer.js

import * as actionTypes from '../actions/actionTypes'

const initialState = {
    isAuthenticated: false
}

export default (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.LOGIN:
            console.log('[authReducer.js] case: LOGIN')
            return {
                ...state, isAuthenticated: true
            }
        default:
            return initialState
    }
}

const ProtectedRoute = ({ ...props }) =>
    props.authReducer ? <Route {...props}/> : <Redirect to="/login"/>;

const mapStateToProps = state => {
    return {
        authReducer: state.authReducer.isAuthenticated
    }
}

export default connect(mapStateToProps)(ProtectedRoute);

class Routes extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/login" exact component={Login} />
                    <ProtectedRoute path="/" exact component={Dashboard} />
                    <ProtectedRoute path="/Dashboard" exact component={Dashboard} />
                    <ProtectedRoute path="/About" exact component={About} />
                </Switch>
            </Router>
        );
    }
}

class Login extends Component {
    render() {
        return (
            <Container>
                <h1>Login</h1>
                <Button onClick={() => this.props.onLogin(this.props.authReducer)}>Login</Button>
                <Button>Logout</Button>
            </Container>


        );
    }
}
const mapStateToProps = state => {
    return {
        authReducer: state.authReducer.isAuthenticated
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onLogin: () => dispatch({type: actionTypes.LOGIN})
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

const rootReducer = combineReducers({
    authReducer: authReducer
});
const store = createStore(rootReducer)

ReactDOM.render(
  <React.StrictMode>
      <Provider store={store}>
          <App />
      </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

import { createBrowserHistory } from "history";
export default createBrowserHistory();

ProtectedRoute.js

import * as actionTypes from '../actions/actionTypes'

const initialState = {
    isAuthenticated: false
}

export default (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.LOGIN:
            console.log('[authReducer.js] case: LOGIN')
            return {
                ...state, isAuthenticated: true
            }
        default:
            return initialState
    }
}

const ProtectedRoute = ({ ...props }) =>
    props.authReducer ? <Route {...props}/> : <Redirect to="/login"/>;

const mapStateToProps = state => {
    return {
        authReducer: state.authReducer.isAuthenticated
    }
}

export default connect(mapStateToProps)(ProtectedRoute);

class Routes extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/login" exact component={Login} />
                    <ProtectedRoute path="/" exact component={Dashboard} />
                    <ProtectedRoute path="/Dashboard" exact component={Dashboard} />
                    <ProtectedRoute path="/About" exact component={About} />
                </Switch>
            </Router>
        );
    }
}

class Login extends Component {
    render() {
        return (
            <Container>
                <h1>Login</h1>
                <Button onClick={() => this.props.onLogin(this.props.authReducer)}>Login</Button>
                <Button>Logout</Button>
            </Container>


        );
    }
}
const mapStateToProps = state => {
    return {
        authReducer: state.authReducer.isAuthenticated
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onLogin: () => dispatch({type: actionTypes.LOGIN})
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

const rootReducer = combineReducers({
    authReducer: authReducer
});
const store = createStore(rootReducer)

ReactDOM.render(
  <React.StrictMode>
      <Provider store={store}>
          <App />
      </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

import { createBrowserHistory } from "history";
export default createBrowserHistory();

const ProtectedRoute=（{…props}）=>
props.authReducer？：；
常量mapStateToProps=状态=>{
返回{
authReducer:state.authReducer.isAuthenticated
}
}
导出默认连接（MapStateTops）（ProtectedRoute）；

Routes.js

import * as actionTypes from '../actions/actionTypes'

const initialState = {
    isAuthenticated: false
}

export default (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.LOGIN:
            console.log('[authReducer.js] case: LOGIN')
            return {
                ...state, isAuthenticated: true
            }
        default:
            return initialState
    }
}

const ProtectedRoute = ({ ...props }) =>
    props.authReducer ? <Route {...props}/> : <Redirect to="/login"/>;

const mapStateToProps = state => {
    return {
        authReducer: state.authReducer.isAuthenticated
    }
}

export default connect(mapStateToProps)(ProtectedRoute);

class Routes extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/login" exact component={Login} />
                    <ProtectedRoute path="/" exact component={Dashboard} />
                    <ProtectedRoute path="/Dashboard" exact component={Dashboard} />
                    <ProtectedRoute path="/About" exact component={About} />
                </Switch>
            </Router>
        );
    }
}

class Login extends Component {
    render() {
        return (
            <Container>
                <h1>Login</h1>
                <Button onClick={() => this.props.onLogin(this.props.authReducer)}>Login</Button>
                <Button>Logout</Button>
            </Container>


        );
    }
}
const mapStateToProps = state => {
    return {
        authReducer: state.authReducer.isAuthenticated
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onLogin: () => dispatch({type: actionTypes.LOGIN})
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

const rootReducer = combineReducers({
    authReducer: authReducer
});
const store = createStore(rootReducer)

ReactDOM.render(
  <React.StrictMode>
      <Provider store={store}>
          <App />
      </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

import { createBrowserHistory } from "history";
export default createBrowserHistory();

类路由扩展组件{
render（）{
返回(
);
}
}

Login.js

import * as actionTypes from '../actions/actionTypes'

const initialState = {
    isAuthenticated: false
}

export default (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.LOGIN:
            console.log('[authReducer.js] case: LOGIN')
            return {
                ...state, isAuthenticated: true
            }
        default:
            return initialState
    }
}

const ProtectedRoute = ({ ...props }) =>
    props.authReducer ? <Route {...props}/> : <Redirect to="/login"/>;

const mapStateToProps = state => {
    return {
        authReducer: state.authReducer.isAuthenticated
    }
}

export default connect(mapStateToProps)(ProtectedRoute);

class Routes extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/login" exact component={Login} />
                    <ProtectedRoute path="/" exact component={Dashboard} />
                    <ProtectedRoute path="/Dashboard" exact component={Dashboard} />
                    <ProtectedRoute path="/About" exact component={About} />
                </Switch>
            </Router>
        );
    }
}

class Login extends Component {
    render() {
        return (
            <Container>
                <h1>Login</h1>
                <Button onClick={() => this.props.onLogin(this.props.authReducer)}>Login</Button>
                <Button>Logout</Button>
            </Container>


        );
    }
}
const mapStateToProps = state => {
    return {
        authReducer: state.authReducer.isAuthenticated
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onLogin: () => dispatch({type: actionTypes.LOGIN})
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

const rootReducer = combineReducers({
    authReducer: authReducer
});
const store = createStore(rootReducer)

ReactDOM.render(
  <React.StrictMode>
      <Provider store={store}>
          <App />
      </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

import { createBrowserHistory } from "history";
export default createBrowserHistory();

类登录扩展组件{
render（）{
返回(
登录
this.props.onLogin（this.props.authReducer）}>Login
注销
);
}
}
常量mapStateToProps=状态=>{
返回{
authReducer:state.authReducer.isAuthenticated
}
}
const mapDispatchToProps=调度=>{
返回{
onLogin:（）=>dispatch（{type:actionTypes.LOGIN}）
}
}
导出默认连接（mapStateToProps、mapDispatchToProps）（登录）；

index.js

import * as actionTypes from '../actions/actionTypes'

const initialState = {
    isAuthenticated: false
}

export default (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.LOGIN:
            console.log('[authReducer.js] case: LOGIN')
            return {
                ...state, isAuthenticated: true
            }
        default:
            return initialState
    }
}

const ProtectedRoute = ({ ...props }) =>
    props.authReducer ? <Route {...props}/> : <Redirect to="/login"/>;

const mapStateToProps = state => {
    return {
        authReducer: state.authReducer.isAuthenticated
    }
}

export default connect(mapStateToProps)(ProtectedRoute);

class Routes extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/login" exact component={Login} />
                    <ProtectedRoute path="/" exact component={Dashboard} />
                    <ProtectedRoute path="/Dashboard" exact component={Dashboard} />
                    <ProtectedRoute path="/About" exact component={About} />
                </Switch>
            </Router>
        );
    }
}

class Login extends Component {
    render() {
        return (
            <Container>
                <h1>Login</h1>
                <Button onClick={() => this.props.onLogin(this.props.authReducer)}>Login</Button>
                <Button>Logout</Button>
            </Container>


        );
    }
}
const mapStateToProps = state => {
    return {
        authReducer: state.authReducer.isAuthenticated
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onLogin: () => dispatch({type: actionTypes.LOGIN})
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

const rootReducer = combineReducers({
    authReducer: authReducer
});
const store = createStore(rootReducer)

ReactDOM.render(
  <React.StrictMode>
      <Provider store={store}>
          <App />
      </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

import { createBrowserHistory } from "history";
export default createBrowserHistory();

const rootReducer=combinereducer({
authReducer:authReducer
});
const store=createStore（rootReducer）
ReactDOM.render(
,
document.getElementById（'root'））
);

---

我在将

isAuthenticated

布尔值设置为true，然后浏览受保护的路由时遇到问题。我设置的路线仍然受到保护，我不知道为什么。我是一个新的反应，所以任何帮助都是感激的！提前谢谢。

所以我需要在设置

isAuthenticated

boolean之后设置重定向。我创建了一个

history.js

文件来导出

createBrowserHistory

history.js

import * as actionTypes from '../actions/actionTypes'

const initialState = {
    isAuthenticated: false
}

export default (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.LOGIN:
            console.log('[authReducer.js] case: LOGIN')
            return {
                ...state, isAuthenticated: true
            }
        default:
            return initialState
    }
}

const ProtectedRoute = ({ ...props }) =>
    props.authReducer ? <Route {...props}/> : <Redirect to="/login"/>;

const mapStateToProps = state => {
    return {
        authReducer: state.authReducer.isAuthenticated
    }
}

export default connect(mapStateToProps)(ProtectedRoute);

class Routes extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route path="/login" exact component={Login} />
                    <ProtectedRoute path="/" exact component={Dashboard} />
                    <ProtectedRoute path="/Dashboard" exact component={Dashboard} />
                    <ProtectedRoute path="/About" exact component={About} />
                </Switch>
            </Router>
        );
    }
}

class Login extends Component {
    render() {
        return (
            <Container>
                <h1>Login</h1>
                <Button onClick={() => this.props.onLogin(this.props.authReducer)}>Login</Button>
                <Button>Logout</Button>
            </Container>


        );
    }
}
const mapStateToProps = state => {
    return {
        authReducer: state.authReducer.isAuthenticated
    }
}

const mapDispatchToProps = dispatch => {
    return {
        onLogin: () => dispatch({type: actionTypes.LOGIN})
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

const rootReducer = combineReducers({
    authReducer: authReducer
});
const store = createStore(rootReducer)

ReactDOM.render(
  <React.StrictMode>
      <Provider store={store}>
          <App />
      </Provider>
  </React.StrictMode>,
  document.getElementById('root')
);

import { createBrowserHistory } from "history";
export default createBrowserHistory();

在我的

authReducer.js

文件中，我导入了这个历史文件。然后我使用

history.push（）

方法在设置

isAuthenticated:true

const initialState = {
    isAuthenticated: false
}

export default (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.LOGIN:
            console.log('[authReducer.js] case: LOGIN')
            history.push('/dashboard')
            return {
                ...state, isAuthenticated: true
            }
        default:
            return initialState
    }
}

---

这个文档帮助我

它是否在代码中记录了

console.log（'[authReducer.js]case:LOGIN'）

？顺便说一句，您需要使用

redux persist

来保持用户在刷新后仍能登录。它会记录

console.log（'[authReducer.js]case:LOGIN'）

因此，当用户点击登录按钮时，开关盒会被点击。要查看实际情况，您可以使用

redux dev tools

chrome extension（）。你也应该根据这个npm包来改变你的商店=>谢谢你推荐这个工具，那个；这是一个有用的调试器。我在扩展中看到authReducer实际上正在将

isAuthenticated

状态设置为

true

。如果没有问题，isAuthenticated是否为true/reducer如果为true，我没有看到任何到仪表板的重定向