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

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

你忘了嵌入＆＃39; / id＆＃39;在网络路线内。 React Router通过将路由放置在其他路由中来允许嵌套路由...如果您在网络中拥有所有网络/ ID内容并且网络呈现其子节点，那么这将正常工作。

需要构建新的NetworkMetaContainer，它具有简单的渲染子项......或者如果你想要，你可以在网络路径中有<IndexRoute />，但无论哪种方式，NetworkMetaContainer都必须只是外部包装器（也许它在网络中有不同的标签或链接或可能性）？

Answer 2

要尝试的另一种方法是添加一个

<base href="/">

基本HTML页面的标题标签内的标签。

Answer 3

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

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

React路由器不使用params

5 个答案: