Question

<Router>
  <div>
    <Route exact path="/" component={App}/>
    <Route exact path='/' component={Home}/>
    <Route path="/Project" component={Project}/>
  </div>
</Router>
)

home组件如何在App组件中呈现为子组件（替代'IndexRoute'）

Answer 1

最简单的答案就是将Home移动到应用的render（）方法中，如下所示：

class App extends Component {
    render() {
        return (
            <Home />
        );
    }
}

然后，在您的顶部路线中，您可以拥有：

<Router>
  <div>
    <Route exact path="/" component={App}/>
    <Route path="/Project" component={Project}/>
  </div>
</Router>

然而，这完全取决于你想做什么。 App是否始终将Home作为子组件？否则，您可以将内部组件嵌套在路由器中，如下所示：

这会将App的props.children设置为您尝试使用的特定组件。然后可以在你的应用程序中使用它，如下所示：

class App extends Component {
    render() {
        return (
            <MyHeaderComponent />
            {this.props.children}
            <MyFooterComponent />
        );
    }
}

Answer 2

在下面的代码中，导航到/会将App组件作为其子项呈现Home

<Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="project" component={Project}/>
</Route>

反应路由器v4中的IndexRoute等价物

2 个答案: