register 组件和 SignUp 组件重叠。
我有一个受保护的路由，用户将在 Home 页面开始，当条件为真时（SignUp 正在注册时更新）它将转移到 userSignedUp 组件，但 {{ 1}} 组件是重叠的，并且是活动的（输入和按钮）。
请检查-
codesandbox - 项目。
（这里添加Home 到SignUp会在退出history.push('/home')后得到空白的sigup组件）
有谁知道如何解决这个问题，我的代码有什么问题？
App.js
CreatePassGuardedRoute.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
}
};