Question

我正在研究一个组件，该组件从Provider类中获取一个全局变量（我正在使用上下文api来管理状态）并将其与局部变量进行比较。如果变量匹配，则要呈现DOM，如果变量不匹配，则要重定向到另一条路线。

我尝试在componentDidMount（）中使用withContext钩子来引入全局变量来设置我的条件，但这没有用。我还尝试将条件条件放入render方法中，直到我尝试将Redirect用作else语句之前，该条件才起作用。我还在else语句中尝试了this.props.history.push，但这也引发了错误。

app.js

<BrowserRouter>
  <Provider>
    <Header />
      <Switch>   

       //This is the component i'm working on
       <Route path='/test' component={test} /> 

       //This is the component I'm trying to redirect to
       <Route path='/error' component={errorPage} />

       <Route component = {PageNotFound} />
       </Switch>
  </Provider>
</BrowserRouter>

/context/index.js

class Provider extends Component {

  state = {
    globalID: ''
  };

 render(){
    return (
      <AuthContext.Provider value = {{
        data: this.state,
      }}>
        {this.props.children}
      </AuthContext.Provider>
    );
  };
};

test.js //这是我正在研究的内容，但是React不喜欢该重定向标签

export default class UpdateCourse extends Component {
  state = {
    localID: ''
  }

  render()
   const ID = this.state.localID
   return (
    <div>
    <Consumer>
      {({data}) => (  
        {ID === data.globalID ?
         <React.Fragment>
          <div>
           <p>test</p>
          </div>
        : <Redirect to = '/error' />


// I omitted a lot but hopefully you get the idea of what I'm trying to accomplish

所以基本上，如果globalID和localID相同，那么我想显示测试组件。如果它们不相同，我想自动重定向到错误路由

比较全局变量和局部变量后如何重定向到另一条路线

0 个答案: