反應路由器不使用參數

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>