Question

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

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

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

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

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

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

Answer 1

在第4版中它实际上要容易得多，因为let arr = cal.map(element => window[`s${element}`]); // asuming 'cal' is something significant let index = 0; playAudio(arr[index]); function playAudio(audio) { if (!audio || !(audio instanceof Audio)) return; audio.addEventListener('ended', function() { index++; playAudio(arr[index]); }) audio.play(); }只是普通组件，就像其他任何组件一样。您无需使用<Route />，而是可以将路径准确地放在需要匹配组件渲染的位置。以下内容相当于您的v3示例：

props.children

更新了答案以包含＆＃34;索引＆＃34;路径。

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

1 个答案: