Question

React 路由器无法与参数配合使用

2017-03-20

22975

javascript reactjs webpack redux react-router

我有以下设置：

<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

您还可以尝试在基本 HTML 页面的 head 标签内添加

<base href="/">

标签。

Manuel Hernandez

2018-07-20

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 通过将路由放置在其他路由中来实现嵌套路由...如果您在网络内拥有所有网络/id 内容，并且网络呈现其子项，那么这将正常工作。

需要构建具有简单渲染子项的新 NetworkMetaContainer...或者如果您愿意，您可以在网络路由内有一个 <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>