反应路由器不使用参数答案

【问题标题】：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 错误。有人见过这样的事情吗？

【问题讨论】：

标签： javascript reactjs webpack redux react-router

【解决方案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>

【讨论】：