时间戳

首页 > 解决方案 > ReactJS：从一个页面导航到另一个页面

javascript - ReactJS：从一个页面导航到另一个页面

问题描述

我又创建了两个页面，第一个是主页（我可以进入这个页面），第二个页面是一个创建表单（我不能去这里！）

我的文件夹结构：

application:
> application.tsx
> application-update.tsx
> index.tsx
// there I have created a new folder (LegacyFolder) with the page 
>LegacyFolder
    >>index.tsx
    >>applicationLegacy.tsx
    >>applicationLegacy-update.tsx

我在 LegacyFolder/index.tsx 中复制了（显然有一些更改）我的 application/index.tsx

import ApplicationLegacy from './applicationLegacy';
import ApplicationLegacyUpdate from './applicationLegacy-update';

const Routes = ({ match }) => (
  console.log('match ', match),
  (
    <>
      <Switch>
        <ErrorBoundaryRoute path={match.url} component={ApplicationLegacy } /> // (I can go there)
        <ErrorBoundaryRoute exact path={`${match.url}/new`} component={ApplicationLegacyUpdate } /> // I can't go there
      </Switch>
    </>
  )
);

export default Routes;

现在从我的菜单中我可以进入 ApplicationLegacy。

在 ApplicationLegacy 里面，我有一个按钮可以进入 ApplicationLegacyUpdate 页面：

<Link to={`${match.url}/new`} className="btn btn-primary jh-create-entity" id="jh-create-entity" data-cy="entityCreateButton">
          <FontAwesomeIcon icon="plus" />
          &nbsp; <Trans i18nKey="applicazione.create">{'applicazione.create'}</Trans> Application
        </Link>

当我单击此处时，我的 url 更改为/applicationLegacy/new但页面没有更改。

我能怎么做？

标签： javascriptreactjsreact-router

解决方案

我想如果您将 prop 精确添加到第一个名为 ErrorBoundaryRoute 的组件中，该组件负责显示名为 ApplicationLegacy 的组件，我想您可以解决问题。

推荐阅读