Question

我在react项目中有一个模块，想要在URL的中间使用带参数的嵌套路由，但是单击链接后，它将重定向到未找到的页面。当前页面的网址是这样的：

"/AssetContext/Transfers/123"

同一页面上的嵌套路由是这样的：

"/AssetContext/Transfers/123/NewTransferItem"

我的模块是这样的：

import React, { Component, Suspense } from "react";
import TransferDetails from "./transfer-details";
import { Link, Route, Switch  } from "react-router-dom";

const Test = React.lazy(() => import("./test"));
const TransferItems = React.lazy(() => import("./transfer-items"));
const NewTransferItem = React.lazy(() => import("./new-transfer-item"));

class TransferItemsContainer extends Component {
  state = {
    transferId: this.props.match.params.id
  };

  render() {
    const { transferId } = this.state;
    return (
      <>
        <TransferDetails transferId={transferId} />

        <Link to={`/AssetContext/Transfers/${transferId}/test`}>test</Link>
        <Link to={`/AssetContext/Transfers/${transferId}/TransferItems`}>Transfer Items</Link>
        <Link to={`/AssetContext/Transfers/${transferId}/NewTransferItem`}>New Transfer Items</Link>

        <Switch>
          <Route
            exact
            path={`/AssetContext/Transfers/:transferId/test`}
            component={Test}
          />

          <Route
            path="/AssetContext/Transfers/:transferId/TransferItems"
            render={() => <TransferItems transferId={transferId} />}
          />

          <Route
            path="/AssetContext/Transfers/:transferId/NewTransferItem"
            render={() => <NewTransferItem transferId={transferId} />}
          />
        </Switch>
      </>
    );
  }
}

export default TransferItemsContainer;

但是路线没有打中！有什么问题？！

使用中间的参数反应嵌套路线

0 个答案: