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

Question

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

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

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

App.js

 return (
    <div className='App-div'>
      <GuardedRoute path='/home' auth={userSignedUp}>
        <Home userIDNumber={userID} setIfSignUp={setIfSignUp} />
      </GuardedRoute>
      <Switch>
        <Route path='/signup'>
          <SignUp setUserNumber={setUserID} setIfSignUp={setIfSignUp} />
        </Route>
      </Switch>
    </div>
  );

GuardedRoute.js

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

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

Answer 1

您需要将 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
    }
  };