Question

我正在使用React.js Router并尝试实现这一目标：

用户先进入module，然后再进入level，网址将如下所示： myapp.com/game/module/some-module/level/level-1。我需要像这样处理所有不同的module和level： /module/:name /level/:name 因此我不需要多次指定每个网址。

这是App.js中的代码：

const App = () =>
    <Router>
        <Switch>
            <Route exact path="/" component={Home} />
            <Route exact path="/game" component={Game} />
            <Route exact path="/module/:name" component={Module} />
            <Route exact path="/level/:name" component={Level} />
            <Route component={NoMatch} />
        </Switch>
    </Router>

export default App

我知道我可以像这样match.params.name那样在子级中“获取”模块名称的值。

我如何在React中做到这一点？您有比这更好的方法吗？

例如/game/some-module/some-level，在这种情况下，您如何在module name

中传递level name和Route

Answer 1

看起来Level路线应该嵌套在Module组件内。

以下是有关堆栈溢出的类似讨论：Nested routes with react router v4

这是一篇很好的博客文章，解释了嵌套路由如何在React Router v4中工作：https://tylermcginnis.com/react-router-nested-routes/

React查询字符串采用多个参数吗？

1 个答案: