Question

使用react路由器v4，我无法使用params创建路由：

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 - params失败的路由

1 个答案: