组件重叠 - 显示一个在另一个上 - 反应路由器 v5

问题描述

register 组件和 SignUp 组件重叠。
我有一个受保护的路由，用户将在 Home 页面开始，当条件为真时（SignUp 正在注册时更新）它将转移到 userSignedUp 组件，但 {{ 1}} 组件是重叠的，并且是活动的（输入和按钮）。

请检查- codesandbox - 项目。
（这里添加Home 到SignUp会在退出history.push('/home')后得到空白的sigup组件）

有谁知道如何解决这个问题，我的代码有什么问题？

App.js

CreatePass

GuardedRoute.js

Home

在发布您的答案之前，请在我的代码和盒子中尝试您的任何解决方案

解决方法

不是将 path="/home" 提供给 GuardedRoute，您需要将其传递给 GuardedRoute 内的 Route

return (
    <div className='App-div'> 
     <Switch>
      <GuardedRoute path='/home' auth={userSignedUp}>
        <Home userIDNumber={userID} setIfSignUp={setIfSignUp} />
      </GuardedRoute>
      {/* remove the exact here so so the route works when something is after the / */}
        <Route path='/signup'>
          <SignUp setUserNumber={setUserID} setIfSignUp={setIfSignUp} />
        </Route>
      </Switch>
    </div>
  );


function GuardedRoute({ children,auth,path }) {
  return (
    <Route
      path={path}
      render={() => {
        return auth ? children : <Redirect to='/signup' />;
      }}
    />
  );
}

class SignUp extends Component {
  constructor(props) {
    super(props);
    //this.signUpProcess = this.signUpProcess.bind(this);
    this.state = {
      stage: 1,};
  }

 
  render() {
    return (
  <div className='signUp-div'>
    <Header />
        {/* remove the Router / */}
      <div className='form-div'>
        <Redirect to='/signup/mobile' />
        <Switch>
          <Route  path={'/signup/mobile'} component={MobileNum} />
          <Route  path={'/signup/idnumber'}>
            <IdentNumber setPersonalID={this.props.setUserNumber} />
          </Route>
          <Route  path={'/signup/password'}>
            <CreatePass
              setIfSignUp={this.props.setIfSignUp}
              pathsArray={pathArray}
            />
          </Route>
        </Switch>
      </div>

  </div>
);

} }

在 CreatePass 组件中

const handleClickButton = () => {
    if (passValue.length === 4 && confirmPass.length === 0) {
      textInput.current.focus();
    } else if (passValue === confirmPass && shouldUpdateMessage) {
      // booleanValue();
      //pathsArray.splice(0,pathsArray.length);
      //console.log(pathsArray);
      setIfSignUp(true);
      history.push('/home'); // uncomment this line
    }
  };