反应路由器不使用参数

Question

我有以下设置：

<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 错误。 有没有人见过这样的事情？

Answer 1

其他尝试是添加一个

<base href="/">

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

Answer 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 中来允许嵌套路由...如果您在网络中拥有所有 network/id 内容并且网络呈现其子代，那么这将正常工作。

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

Answer 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>

Answer 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" 之前，以便在查看单个联系人时呈现路由

Answer 5

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

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