时间戳

首页 > 解决方案 > 在反应中使用相同启动路径制作多条路线的方法是什么

reactjs - 在反应中使用相同启动路径制作多条路线的方法是什么

问题描述

我在反应js中有以下代码

const routing = (
    <Router>
        <div>
            <Route path="/posts" component={Posts} />
            <Route path="/posts/new" component={New} />
        </div>
    </Router>
)
ReactDOM.render(routing, document.getElementById('root'))

当我尝试编写 localhost/posts 或 localhost/posts/new 时，相同的组件称为 . 我知道发生这种行为是因为我在两条路线中都有“帖子”。我的问题的任何解决方案，我都需要两条路线中的“帖子”

标签： reactjs

解决方案

最简单的解决方案：

把你的路线放在你的/posts/new路线之前/posts。React 从您的第一条路线开始进行部分匹配。所以/posts/*将永远匹配/posts（除非你使用exact道具！）

更好的解决方案：

在您的路线上使用exact道具/posts仅接受对/posts. exact有关 React 中如何工作的更多详细信息，请参阅我的答案： React：<Route exact path="/" /> 和 <Route path="/" /> 之间的区别

推荐阅读