Question

对于我的网站布局，我希望每个内容页面都具有相同的填充，但我希望登录页面组件没有这样的填充。为此，我使用嵌套的React Router;外部交换机检查它是否应显示登录页面。如果没有，它将呈现一个ContentPage，它放置一个外部填充div，然后使用另一个React Router加载适当的内容。我在内部Switch中有一个Redirect案例，这样如果用户键入一个不存在的url，它会将它们重定向到登录页面。但是，糟糕的网址现在给我这个错误：

You tried to redirect to the same route you're currently on: "/"

这是我的外部路由器：

        <Route exact path="/" component={LandingPage}/>

        <Route path="/" render={(props) => (
          <ContentPage isLoggedIn={this.state.isLoggedIn} passwordHash={this.state.passwordHash} {...props} />
        )} />
      </Switch>

这是我的内部路由器：

class ContentPage extends Component<Props> {
  render() {
    return (
      <BrowserRouter>
      <div>
        <div className="content" style={{padding: "36px"}}>
          <Switch>
            <Route path="/logIn" component={LogIn}/>
            <Redirect to="/"/>
          </Switch>
        </div>
      </div>
      </BrowserRouter>
    );
  }
}

当我尝试找到像＃34; / asdfasdf＆＃34;这样的错误网址时，我收到了错误消息。它对我来说并没有多大意义，因为重定向应该是从随机URL到＆＃34; /＆＃34;。

如果拥有嵌套路由器通常是不好的做法，我也会对除了目标网页以外的所有网页上的任何其他填充方法开放。

Answer 1

看看the official docs，这里有一个如何实现嵌套路由的示例。一般来说，你不应该嵌套路由器。您应将<Route />放在单个路由器<BrowserRouter />组件中。

我基于官方文档做了一个简单的例子，只是为了演示嵌套和重定向的样子：

https://codesandbox.io/s/yw47150lvx

在这个例子中，有几条不同的父路线：

 <Route exact path="/" component={Home} />
 <Route path="/about" component={About} />
 <Route path="/topics" component={Topics} />
 <Redirect to="/" />;

如果给定的URL与任何路由都不匹配，则使用

<Redirect to="/"。

在路由<Route path="/topics" component={Topics} />（Topics组件）中，还有一些其他路由：

<Route path={`${match.path}/:topicId`} component={Topic} />
<Route
  exact
  path={match.path}
  render={() => <h3>Please select a topic.</h3>}
/>

我使用match.path道具自动传递给Topics构建嵌套网址路径，例如：/topics/1，topics/2为第一个第二个嵌套路由的嵌套路由和topics/（用于表明没有选择特定主题）

如何构建嵌套的React Router以避免错误：重定向到您正在使用的相同路由

1 个答案: