编辑：

Question

我有一个React视图组件，看起来与下面的代码大致相似。我遇到的问题是嵌套的/:handle/saved路由与相应的组件不匹配，因此，我被重定向到了NotFound页面。

我在应用程序的其他页面中嵌套了可以正常工作的路由，那么我在这里缺少什么？

下面是与页面组件相对应的代码。

import React, { Component } from 'react';
import { func, object } from 'prop-types';
import { NavLink, Route, Switch } from 'react-router-dom';
import { Grid, Icon } from 'semantic-ui-react';

function ProfilePage() {
  return (
    <Grid>
      <Grid.Row className={row}>
        <Grid.Column className={column}>
          <NavLink
            style={{ margin: '0 2rem 0 0' }}
            className={link}
            activeStyle={{ borderTop: '2px solid #333333' }}
            to='/johndoe'
          >
            <Icon className={icon} name='grid layout' size='small' /> Posts
          </NavLink>
          <NavLink
            style={{ margin: '0 0 0 2rem' }}
            className={link}
            activeStyle={{ borderTop: '2px solid #333333' }}
            to='/johndoe/saved'
          >
            <Icon className={icon} name='bookmark outline' size='small' />{' '}
            Saved
          </NavLink>
        </Grid.Column>
      </Grid.Row>
      <Grid.Row className={row}>
        <Grid.Column className={column}>
          <Switch>
            <Route
              exact
              path='/:handle'
              component={() => <div>I am Groot</div>}
            />
            <Route
              path='/:handle/saved'
              component={() => <div>I am Groot: Saved</div>}
            />
          </Switch>
        </Grid.Column>
      </Grid.Row>
    </Grid>
  );
}

export default ProfilePage;

Answer 1

尝试在/:handle/saved之前放置/:handle路线

但这也可能有错字？？也许应该用{{1}之前的/:handle/saved代替/:handle/:saved

还尝试使用:将add saved添加到路由

编辑：

请检查您的控制台，是否有任何错误？

这里是working codesandbox。

您可以尝试在组件周围添加exact，这是我添加的唯一内容，并且可以正常工作。

为什么我的嵌套反应路线之一不起作用？

1 个答案:

编辑：