Question

我有一个组件：

const ShopPage = ({match})=> {
    return(
        <div>
            <Route exact path={`${match.path}`} component={CollectionOverview}/>
            <Route path={`${match.path}/:id`} component={CategoryPage} />
        </div>
        
    )
}

CollectionOverview组件是在浏览器重定向到当前组件时呈现的，因为match.path与浏览器用来重定向到该组件的路径完全相同。（即localhost:3000/shop。但是，当我输入类似localhost:3000/shop/123的内容时，应该将我重定向到CategoryPage组件，对吗？看起来像这样：

const CategoryPage = ({match}) => {
    console.log(match.path)
    return(
        <div className='category'>
            <h2>Category</h2>
        </div>
    )
}

但是，我得到了空白页。我在这里做错了什么？像这样从app.js调用ShopPage组件：

<Switch>
    <Route exact path='/' component={HomePage}/> 
    <Route exact path='/shop' component={ShopPage}/>
    <Route exact path='/signin' render={() => this.props.currentUser ? 
      (<Redirect to='/'/>) :
      (<SignInAndSignUp/>)} 
      />
    <Route exact path='/checkout' component={Checkout}/>
  </Switch>

Answer 1

我只需要从ShopPage组件的Route中删除exact。因此，从此：

<Route exact path='/shop' component={ShopPage}/>

对此：

<Route path='/shop' component={ShopPage}/>

现在可以使用了。

Answer 2

您可以将路由器和交换机组件包装到CategoryPage路由和Overview路由。以前对我有用。

    const ShopPage = ({match})=> {
        return(
          <Router>
            <Switch>
                <Route exact path={`${match.path}`} component={CollectionOverview}/>
                <Route exact path={`${match.path}/:id`} component={CategoryPage} />
            </Switch>
         </Router>        
        )
    }

下一条路线无法在嵌套路由中使用？

2 个答案: