首页 文章

React Router 4.1.1将头部组件放入每个其他组件中，无需导入

提问于
浏览 次
1

我试图从反应路由器网站https://reacttraining.com/react-router找到文档，我似乎找不到嵌套路由在4.1.1中工作的解决方案 . 例如，在旧版本的React Router中，您可以像这样嵌套路由：

<Router history={history}>
    <Route exact path="/" component={App}>
        <Route path="/cards" component={Example} />
    </Route>
</Router>

这使用了，并且可以轻松地在整个应用程序中存在静态组件（如导航栏），而无需在每个组件中导入它 .

class App extends Component {
    render() {
        return (
            <div>
                <Header/>
                    <main>{ this.props.children }</main>
                <Footer/>
            </div>
        );
    }
}

如何与版本4.1.1具有类似的行为 . 我不想一直在组件中导入标头组件 .

我现在正在使用，但它似乎没有完成我想要做的事情 .

<Router history={history}>
        <Switch>
            <Route exact path="/" component={App}>
                <Route path="/cards" component={Example} />
            </Route>
        </Switch>
    </Router>
reactjs react-router

1 回答

  • 2

    在v4中它实际上要容易得多，因为 <Route /> 就像其他任何正常组件一样 . 您可以将路径准确地放在需要匹配组件渲染的位置，而不是需要使用 props.children . 以下等同于您的v3示例：

    <Router>
  <div>
    <Header />
    <main>
      <Route exact path="/" component={HomePage} />
      <Route path="/cards" component={Example} />
    </main>
    <Footer />
  </div>
</Router>

    更新的答案包含“索引”路径 .

    回复于

相关问题