反应路由器不使用参数

Posted 2023-02-19

【中文标题】反应路由器不使用参数

【英文标题】：React router not working with params

【发布时间】：2017-08-11 22:09:44

【问题描述】：

我有以下设置：

<div>
    <Router history=browserHistory>
        <Route path="/" component=NewCustomerContainer />
        <Route path="/newCustomer" component=NewCustomerContainer />
        <Route path="/search" component=SearchPageContainer />
        <Route path="/network" component=NetworkContainer />
        <Route path="/network/:id" component=NetworkContainer ></Route>
    </Router>
</div>

路线http://localhost:8100/network 工作正常。路由 http://localhost:8100/network/abc123 没有出现在我的控制台中的 404 错误。有人见过这样的事情吗？

【参考方案1】：

要尝试的其他方法是添加一个

<base href="/">

在您的基本 html 页面的 head 标记内标记。

【讨论】：

哦，哇。这实际上对我有用。谢谢！为什么它会起作用？

它也适用于我！在我的情况下它可以工作，因为如果未设置基本 url，它将尝试使用定义的路径（具有参数的路径）作为基本 url 加载资源文件..

使用 react-router-dom v5.2.0 为我工作

【参考方案2】：

<div>
    <Router history=browserHistory>
        <Route path="/" component=NewCustomerContainer />
        <Route path="/newCustomer" component=NewCustomerContainer />
        <Route path="/search" component=SearchPageContainer />
        <Route path="/network" component=NetworkMetaContainer>
            <Route path="/:id" component=NetworkContainer/>
        </Route>
    </Router>
</div>

您忘记将“/id”嵌套在网络路由中。 React Router 允许通过将 Routes 放置在其他 Routes 中来实现嵌套路由...如果您在网络中拥有所有网络/id 内容并且网络呈现其子级，那么这将正常工作。

需要构建具有简单渲染子级的新 NetworkMetaContainer... 或者，如果您愿意，您可以在网络路由内有一个 <IndexRoute />，但无论哪种方式，NetworkMetaContainer 都必须只是外部包装器（也许它会在网络内有不同的选项卡或链接或可能性）？

【讨论】：

这个 + 改变 http://localhost:8100/network/abc123 -> http://localhost:8100/networkabc123 很有魅力！谢谢！

我必须重新声明它才能为我工作； <Route path="/jobs" component=Job > <Route path="/jobs/:jobTab" component=Job /> </Route>

【参考方案3】：

尝试在 Route 组件中添加 prop exact=true

<div>
    <Router history=browserHistory>
        <Route path="/" component=NewCustomerContainer />
        <Route path="/newCustomer" component=NewCustomerContainer />
        <Route path="/search" component=SearchPageContainer />
        <Route path="/network" exact=true component=NetworkContainer />
        <Route path="/network/:id" exact=true component=NetworkContainer ></Route>
    </Router>
</div>

【参考方案4】：

假设你正在使用 react-router-dom https://reactrouter.com/web/guides/primary-components

将您更具体的路线放在之前：

<Route path="/posts/:id" exact>
  <Post />
</Route>
<Route path="/posts">
  <Posts />
</Route>

注意这两条路线是如何排序的。更具体的 path="/contact/:id" 出现在 path="/contact" 之前，因此该路线将 查看单个联系人时呈现

【参考方案5】：

Base href 对我不起作用。不过这样做了：

<Router history=browserHistory>
   <Route path=['/network/:id', '/network'] component=NetworkContainer />
</Router>