Reach Router, визуализация вложенного компонента маршрута

Я использую маршрутизатор Reach в приложении React (с машинописным текстом).

используя вложенные маршруты, я застрял в том, как визуализировать вложенный компонент как отдельный (в отдельном представлении) компонент, а не как дочерний элемент в нижней части родительского компонента.

Код такой:

App.tsx
--------
<Router>
  <Customers path="/customers">
    <PDFExport path=":id" />
  </Customers>
  <Users path="/users">
    <PDFExport path=":id" />
  </Users>
</Router>

Customers.tsx
--------------
 interface IProps extends RouteComponentProps {children: any;}

const Customers: React.FC<IProps> = props => {
 const[customers,setCustomers]=React.useSate(); // somehow fetch custmers
  return (
     <>
       {customers.map(c=>(
           <Button as={Link} to={`${c.id}`} />)
       }
      // on click the url chages to i.g. `/customers/123`
      // but I do not get navigated to the PDFExport component
      // but I have to render that here as child like follow
       {props.childern}
      // in this case I will have the content of PDFExport component at the bottom of Customers component
    </>
  );
}

PDFExport.tsx
-------------
interface IProps extends RouteComponentProps {
  id?: string;
}
const PDFExport: React.FC<IProps> = props => {
  return <div>{props.id}</div>;
  // this will contain the comon form I want to use for different parents
};

Причина, по которой я использовал PDFExport как вложение, заключается в том, что я хочу повторно использовать его для разных маршрутов, например: /users/:id, /customers/:id.

Есть ли способ отобразить вложенный маршрут как отдельный компонент, а не как дочерний.


reactjs typescript reach-router react-tsx
person Amir-Mousavi    schedule 22.10.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете попробовать что-то вроде этого:

const Empty = ({ children }) => {
  return children;
}

<Router>
  <Empty path="/customers">
    <Customers path="/" />
    <PDFExport path=":id" />
  </Empty>
  <Empty path="/users">
    <Users path="/" />
    <PDFExport path=":id" />
  </Empty>
</Router>

Когда вы определяете вложенный компонент с / путем, он будет использоваться как компонент индекса для этого родителя. Поскольку у нас есть пустой родительский элемент, у вас будет отображаться этот компонент индекса. Как только вы перейдете к :id, вы получите этот компонент в родительском элементе, который снова является пустым компонентом.

См. Раздел Маршруты индексации.

person zhuber    schedule 22.10.2019
comment
Это не реактивный маршрутизатор, это REACH ROUTER - person Amir-Mousavi; 22.10.2019
comment
Спасибо, это работает, хотя введение пустого компонента немного запутано, но я нахожусь в середине проекта, и другого пути нет :) - person Amir-Mousavi; 23.10.2019
comment
Я согласен, может быть, с немного лучшей формулировкой это выглядело бы лучше, может быть, что-то вроде «Заполнителя». - person zhuber; 23.10.2019
comment
Да, формулировка, и на ранних этапах я мог бы иметь некоторые функции в этом, скажем, wrapper или placeholder, например, некоторые интерфейсы или функции, которые понадобятся всем детям. Это будет выглядеть более профессиональным и счастливым менеджером проекта: D - person Amir-Mousavi; 23.10.2019