Question

我使用react路由器制作了嵌套路由器。

我想进入登录页面，何时成功完成注册。

但是，路由器没有工作。我该怎么办？谢谢你的帮助。

＆＃13;

// StepTwoComponent.tsx

signUp(event: FormEvent<HTMLFormElement>) {
  userService.signup(this.props.signup).subscribe((res: any) => {
    if (res.result === 'success') {
      this.props.history.push('/login');
    } else {
      alert(res.msg);
    }
  });
  event.preventDefault();
}

＆＃13;

<!--App.tsx-->

<BrowserRouter>
  <Switch>
    <Redirect exact={true} from="/" to="/login" />
    <Route path="/login" component={LoginComponent} />
    <Route path="/sign-up" component={SignUpComponent} />
    <Route component={LoginComponent} />
  </Switch>
</BrowserRouter>

<!--Signup.tsx-->

<BrowserRouter>
  <div>
    <Switch>
      <Redirect exact={true} from="/sign-up" to="/sign-up/1" />
      <Route path="/sign-up/1" component={StepOneComponent} />
      <Route path="/sign-up/2" component={StepTwoComponent} />
    </Switch>
  </div>
</BrowserRouter>

＆＃13;

编辑：添加index.tsx index.tsx只有这段代码。

ReactDOM.render(
  <App />,
  document.getElementById('root') as HTMLElement
);

Answer 1

问题是您多次使用BrowserRouter，在index.tsx文件中或根据您的结构在app包装器组件中只使用一次。

index.tsx档案：

ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>,
    document.getElementById('root') as HTMLElement
);

从所有其他组件中移除BrowserRouter。

Answer 2

您只需要在顶层使用 BrowserRouter 而不是每个子组件，从 SignUp.tsx 中删除它。 Switch中也不需要Signup.tsx，因为您的路径都没有重叠。 Switch基本上用于渲染第一个Route匹配，当你的路径都没有重叠时，只有匹配的Route会反正渲染

<强> App.tsx

<BrowserRouter>
  <Switch>
    <Redirect exact={true} from="/" to="/login" />
    <Route path="/login" component={LoginComponent} />
    <Route path="/sign-up" component={SignUpComponent} />
    <Route component={LoginComponent} />
  </Switch>
</BrowserRouter>

<强> Signup.tsx

 <div>
      <Redirect exact={true} from="/sign-up" to="/sign-up/1" />
      <Route path="/sign-up/1" component={StepOneComponent} />
      <Route path="/sign-up/2" component={StepTwoComponent} />
  </div>

没有工作反应路由器嵌套

2 个答案: