Javascript 为什么我的路线没有加载我的React组件？

我在我的应用程序中使用react router进行路由，除了最后一条用于模式目的的路由之外，我的所有路由都工作，但是它没有加载组件

function App() {
  return (
    <BrowserRouter basename="/veochorusapp">
      <ModalSwitch />
    </BrowserRouter>
  );
}
export default App;

function ModalSwitch() {
  let location = useLocation();
  let background = location.state && location.state.background;

  return (
    <div className="App">
      <Switch location={background || location}>
        <Route exact path="/" component={Home} />
        <Route path="/applications" component={Applications} />
        <Route path="/waterType" component={WaterType} />
        <Route path="/feedType" component={FeedType} />
        <Route path="/products/:productName" component={Product} />
        <Route path="/products" component={Products} />
        <Route path="/interactive" component={ProductView} />
      </Switch>
      {background && <Route path="/feature/:id" children={<Modal />} />}
      {background && <Route path="/accessory/:id" children={<AccessoryModal />} />}
    </div>
  );
}

函数应用程序（）{
返回(
);
}
导出默认应用程序；
函数ModalSwitch（）{
让location=useLocation（）；
让background=location.state&&location.state.background；
返回(
{背景&&}
{背景&&}
);
}

未加载组件的路径如下所示：

{background && <Route path="/accessory/:id" children={<AccessoryModal />} />}

{background&&}

链接到此路由的代码如下所示。我在之前的一个组件上使用了相同的过程，它工作得非常好

function AccessoryBtns() {
  let location = useLocation();

  return (
    <ul className="accessoryBtns">
      {AccessoriesData.map((i, index) => (
        <li key={index}>
          <Link
            key={i.id}
            className="btn"
            to={{
              pathname: `/accessory/${i.id}`,
              state: { background: location }
            }}
          >
            {i.name}
          </Link>
        </li>
      ))}
    </ul>
  )
}

export function AccessoryModal() {
  let history = useHistory();
  let { id } = useParams();
  let accessory = AccessoriesData[parseInt(id, 10)];

  if (!accessory) return null;

  let back = e => {
    e.stopPropagation();
    history.goBack();
  };

  return (
    <div className="modal">
      <div className="row">
        <div className="col-md-6 text-right">
        Image
        </div>
        <div className="col-md-6">
          <h2>{accessory.name}</h2>
          <p>{accessory.description}</p>
        </div>
      </div>
      <div className="backBtn" onClick={back}><FontAwesomeIcon icon={faArrowLeft} /></div>
    </div>
  );
}

函数AccessoryBtns（）{
让location=useLocation（）；
返回(

{AccessoriesData.map（（i，索引）=>(

{i.name}

))}

)
}
导出函数AccessoryModal（）{
让历史=使用历史（）；
设{id}=useParams（）；
let附件=附件数据[parseInt（id，10）]；
如果（！附件）返回空值；
放回=e=>{
e、 停止传播（）；
goBack（）；
};
返回(
形象
{附件名称}
{附件.说明}

);
}

首先，看起来它们不在

内。其次，根据路由器文档，

子项

必须是一个

函数

{background && <Route path="/feature/:id" children={() => <Modal />} />}

{background&&}/>}

但是，由于您没有向Modal传递任何道具，所以您可以简单地使用

{background && <Route path="/feature/:id">
  <Modal />
</Route>}

{background&&
}

或

{background&&}

在开关中移动它们。出现问题时url等于什么？Nicholas-我有一个附件链接列表，指向相应的url，即/accessory/1/accessory/2等，但AccessoryModal组件不加载。我有同样的过程，上面的路线功能，这绝对是好的。你能告诉我们的代码链接到那里吗？我想确保您正确设置了后台状态。我刚刚添加了链接到那里的代码

，看起来它们不在
内部，应该在吗？这将使它们与其他路由相互排斥，并将迫使它们使用背景位置（如果存在）
根据路由器文档，子项必须是不正确的函数
；它可以是一个函数，但不一定是。您的第二个代码段实际上正在使用它。将组件相互嵌套是使用
子项
道具的一种隐式方式，您为
子项
传递的内容是
，与它们在代码中传递的内容相同。如果这对@Zak Faithfull有帮助，并且解决了您的问题，为什么不将其标记为已接受的答案？
{background && <Route path="/feature/:id" component={Modal} />}