/path/:id 在 Link 是 to={"/path/" + slug} 时不切换视图

Question

我正在尝试使用它的 slug 来显示特定的 post。通过将路由路径设置为 /journal:id 并将 Link 设置为 ={"/journal" + post.field.slug}，我已经成功实现了这一点。然而，这不是我想要 url 的样子。猜猜为什么路由无法识别添加的斜杠？

            <Switch>
                <Route path='/journal' component={Journal} />
                <Route path='/journal/:id' component={SinglePost} />
                <Route path='/shop' component={Shop} />
                <Route path='/contact' component={Contact}/>
            </Switch>

当我单击应该显示 SinglePost 组件的 Journal 内部的 Link 时，URL 发生了变化，但视图没有改变，我仍然看到了 Journal。这是 Link:

        <Link
            className='posts__post'
            key={post.fields.slug}
            to={"/journal/" + post.fields.slug}
        >

Answer 1

如果您有多个路径，它们具有 /journal 和 /journal/:id 等公共部分（公共部分是 /journal），您应该将属性 exact 添加到更短的路径，而不是如果仅部分匹配则停止搜索路线

    <Switch>
        <Route exact path='/journal' component={Journal} />
        <Route path='/journal/:id' component={SinglePost} />
        <Route path='/shop' component={Shop} />
        <Route path='/contact' component={Contact}/>
    </Switch>

/path/:id 在 Link 是 to={"/path/" + slug} 时不切换视图

/path/:id not switching view when Link is to={"/path/" + slug}

javascript

slug

react-router

react-hooks