React:如何在组件内部声明路由

Question

首先，我在发布之前尝试搜索这个问题，但找不到类似用例的解决方案。

因此，我有一个名为App.js的组件，我在其中定义了所有顶级路由：

<TransitionGroup>
<CSSTransition key={location.key} mountOnEnter={true} unMountOnExit={true} timeout={800} classNames="fade-up-down">
<Switch location={location}>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/artists" component={Artists} />
<Route path="/artworks/:slug" component={Artwork} />
</Switch>
</CSSTransition>
</TransitionGroup>

现在，在主组件中，我希望有我的第二级路由，这是我在App.js中没有做的，因为我有从Home.js传递到子组件的道具。我的Home.js中的路由部分如下所示：

<Switch>
<Route exact path="/" render={(props) => <Map {...props} artworks={artworks} />} />
<Route exact path="/grid" render={(props) => <Grid {...props} artworks={artworks} />} />
<Route exact path="/rainbow" render={(props) => <Rainbow {...props} artworks={artworks} />} />
</Switch>

Home.js中的二级路由工作正常，但当我尝试转到任何其他顶级路由时，例如/artists/或/about，它们都不工作。

有人能给我指一下这里的正确方向吗？谢谢

Answer 1

我认为这不可能是你想要的方式。我认为当你导航到你的主页组件时，你正在覆盖应用程序路由器。你的路线必须在你的应用的顶级等级

Answer 2

将第一条路线之后的路线从顶部移动成功。现在是这样的：

<TransitionGroup>
<CSSTransition key={location.key} mountOnEnter={true} unMountOnExit={true} timeout={800} classNames="fade-up-down">
<Switch location={location}>
<Route exact path="/about" component={About} />
<Route exact path="/artists" component={Artists} />
<Route path="/artworks/:slug" component={Artwork} />
<Route path="/" component={Home} />
</Switch>
</CSSTransition>
</TransitionGroup>