时间戳

首页 > 解决方案 > 从 React 的 Context API 组件重定向

reactjs - 从 React 的 Context API 组件重定向

问题描述

在从 cookie 更新状态失败后，我试图从我的上下文中重定向。

import React, { createContext, Component } from 'react';
import { withRouter } from "react-router-dom";
import Cookies from 'universal-cookie';

export const MyContext = createContext();

const cookies = new Cookies();

class MyProvider extends Component {
  componentDidMount() {
    this.setStateFromCookie();
  }

  setStateFromCookie = () => {
    try {
      this.setState({ data: cookies.get('my-cookie')['data'] });
    } catch(error) {
      console.log(error);
      this.props.history.push('/');
    }
    return 
  };

  render() {
    return (
      <MyContext.Provider value={{...this.state}}>
        {this.props.children}
      </MyContext.Provider>
    );
  }
}

export default withRouter(MyProvider);

我正在对 this.props.history.push('/') 使用 withRouter 挂钩，因为上下文正在包装路由器

class MyApp extends Component {
  render() {
    return (
      <BrowserRouter>
        <MyProvider>
          <div className="MyApp">
            <Router>
              <Route exact path='/' component={Index} />
              <Route exact path='/dashboard' component={Dashboard} />
            </Router>
          </div>
        </MyProvider>
      </BrowserRouter>
    );
  }
}
export default MyApp;

问题是出现错误后重定向到主页，但主页没有呈现。我仍然看到仪表板页面。

知道发生了什么以及如何解决这个问题

标签： reactjsreact-nativereact-routerreact-context

解决方案

问题是你有一个嵌套的路由器包裹你的路由。你需要删除它，然后一切都会正常工作

  <BrowserRouter>
    <MyProvider>
      <div className="MyApp">
          <Route exact path='/' component={Index} />
          <Route exact path='/dashboard' component={Dashboard} />
      </div>
    </MyProvider>
  </BrowserRouter>

当您使用嵌套路由器并尝试从 Provider 导航时，Provider 使用的历史记录是由提供的BrowserRouter，因此它无法与依赖于内部<Router>组件的历史记录进行通信。

使用包装组件的单个路由器解决了这个问题

推荐阅读