React Router v5 的问题

Question

我正在尝试在用户配置文件中显示一个设置页面，其中包含多个路由，例如我的帐户、更改密码等...）

/settings 页面的默认布局显示在 /settings 上，但后续页面（/settings/account、/settings/change-password）拒绝显示。 我一直在尝试解决这个问题几个小时，但似乎无法提出解决方案......

索引.js

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <App />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root')
);

应用程序.js

function App() {
  const [loading, setLoading] = useState(true);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(attemptGetUser())
      .then(() => setLoading(false))
      .catch(() => setLoading(false));
    // eslint-disable-next-line
  }, []);

  return loading ? (
    <Loading cover="page" />
  ) : (
    <div className="App">
      <Switch>
        <Route path="/" component={Views} />
      </Switch>
    </div>
  );
}

视图/index.js

export const Views = () => {
  return (
    <Switch>
      <Route exact path="/">
        <Redirect to="/dashboard" />
      </Route>
      <Route path="/auth">
        <AuthLayout />
      </Route>
      <Route path="/">
        <AppLayout />
      </Route>
    </Switch>
  );
};

export default withRouter(Views);

AppViews/index.js

const AppViews = ({ match }) => {
  return (
    <Suspense fallback={<Loading cover="content" />}>
      <Switch>
        <ProtectedRoute path={`/dashboard`} component={Dashboard} />
        <ProtectedRoute path={`/settings`} component={Settings} />
        <ProtectedRoute path={`/logout`} component={Logout} />
        <Redirect from={`${match.url}`} to={'/dashboard'} />
      </Switch>
    </Suspense>
  );
};

export default AppViews;

设置/index.js

const SettingOption = ({ match, location }) => {
  return (
    <Menu
      defaultSelectedKeys={`${match.url}/account`}
      mode="inline"
      selectedKeys={[location.pathname]}
    >
      <Menu.Item key={`${match.url}/account`}>
        <UserOutlined />
        <span>My Account</span>
        <Link to={`account`} />
      </Menu.Item>
      <Menu.Item key={`${match.url}/change-password`}>
        <LockOutlined />
        <span>Change Password</span>
        <Link to={`change-password`} />
      </Menu.Item>
    </Menu>
  );
};

const SettingContent = ({ match }) => {
  return (
    <Switch>
      {/* <Redirect exact from={`${match.url}`} to={`${match.url}/account`} /> */}
      <Route path={`${match.url}/account`} component={EditProfile} />
      <Route path={`${match.url}/change-password`} component={ChangePassword} />
    </Switch>
  );
};

export class Setting extends Component {
  render() {
    return (
      <InnerAppLayout
        sideContentWidth={320}
        sideContent={<SettingOption {...this.props} />}
        mainContent={<SettingContent {...this.props} />}
      />
    );
  }
}

export default Setting;

受保护的路由

const ProtectedRoute = ({ path, component }) => {
  const { isAuth } = useSelector((state) => state.user);

  return isAuth ? (
    <Route path={path} exact component={component} />
  ) : (
    <Redirect to="/auth/login" />
  );
};

任何帮助深表感谢。 蒂亚！

Answer 1

您需要在AppViews/index.js路线上使用exact

<ProtectedRoute exact path={`/settings`} component={Settings} />

以及在Settings/index.js后续路由

<Route exact path={`${match.url}/account`} component={EditProfile} />
<Route exact path={`${match.url}/change-password`} component={ChangePassword} />