Question

我有以下代码 -

class App extends Component {
    render() {
        return (
            <Router>
                <Switch>
                        <MainPage>
                            <Route exact path="user" component={Error}/>
                        </MainPage>
                </Switch>
            </Router>
        )
    }
}

现在为每个Url呈现MainPage，我理解为什么，但是让我们说我希望它只针对某些页面进行渲染。我该如何包装才能完成它？

Answer 1

假设您要显示/user和/member的MainPage，而/anonymous将显示没有MainPage：

class App extends Component {
    render() {
        return (
            <Router>
                <Switch>
                  <Route path="/anonymous" component={Anonymous} />
                  <Route path="/" component={MainPage} />
                </Switch>
            </Router>
        )
    }
}

class MainPage extends Component {
  render() {
    return (
      <div>
        .... // place your original code to print the `MainPage` here

        <Route path="/user" component={User}/>
        <Route path="/member" component={Member}/>
      </div>
    )
  }
}

反应路由器嵌套组件问题

1 个答案: