Почему мой маршрут не загружает мой компонент React?

Question

Я использую реагирующий маршрутизатор в своем приложении для маршрутизации, где все мои маршруты работают отдельно от последнего, который используется для модальных целей, однако он не загружает компонент.

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>
  );
}

Маршрут, который не загружает компонент, следующий:

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

Код, который ссылается на этот маршрут, показан ниже. Я использовал тот же процесс на предыдущем компоненте, который работает отлично.

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>
  );
}

Answer 1

Во-первых, похоже, что они не внутри <Switch>. Во-вторых, согласно документации маршрутизатора, children должно быть function

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

Но так как вы не передаете реквизиты Модалу, вы можете просто использовать

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

или

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