React Router V4 - 参数失败的路由

Question

使用 react router v4 我无法创建带有参数的路由：

const Parent = () => 
 <Main>
    <Switch>
      <Route path="/places" component={PlacesView} />
      <Route path="/places/:placeId" component={PlacesDetailView} />           
      <Route path="/callback" component={CallbackView }/>
    </Switch>    
 </Main>

export const makeMainRoutes = () => {
    return (
      <Router>
         <div>
           <Route path='/' component={Parent} />
         </div>
      </Router>
);}

/places 之后的所有内容都无法呈现应用程序。

即使我添加一个额外的子路径，如 /places/detail，它也无法呈现应用程序。

编辑：主组件呈现导航栏和子组件：

<div id="wrapper">
   <Progress />
   <Navigation location={this.props.location}/>
   <div id="page-wrapper" className={wrapperClass}>
       <TopHeader />
       {this.props.children}
       <Footer />
   </div>
</div>

Answer 1

我遇到了与 OP 完全相同的问题。 This tutorial 帮我找到了解决方案。

将以下行添加到 webpack.conf.js 中解决了问题。

module.exports = {
  ...
  output: {
    ...
    filename: 'index.js',
    publicPath: '/'
  }
}

React Router V4 - 参数失败的路由

React Router V4 - route with params failing

javascript

reactjs

react-router-v4