Блог

React router имеет обычный код:

 <Switch>
   <Route exact path='/order/:id' component={() => <OrderPage/>}/>
   <Route exact path='/schedule/:orderid/:piececode' component={SchedulePage}/>
   <Route path='/login' component={LoginForm}/>
   <Route path='/about' component={About}/>
   <Route path='/sales/invoicelist' component={InvoiceListPage}/>
   <Route path='/sales/invoice' component={InvoicePage}/>
</Switch>
 

это облегчает создание экземпляра одного компонента (как указано в маршруте, соответствующем текущему URL) и делает его видимым в приложении React.

Но можно представить варианты использования, когда несколько компонентов корневого уровня должны быть видны / доступны одновременно, например:

1. Приложения с несколькими вкладками: пользователь хочет работать с несколькими счетами одновременно, и она открывает несколько счетов на вкладках уровня приложения (не на уровне браузера) — каждый счет на каждой странице. Таким образом, она может продолжать редактировать один счет, просматривая данные из другого счета. В конце сеанса использование копирует URL-адрес и отправляет по электронной почте коллеге — она ожидает, что коллега сможет открыть eaxact эти страницы;
2. приложение для торговли акциями с несколькими видимыми компонентами — цены акций, компоненты ввода данных для нескольких акций и т. Д.

Может ли React Route подключать несколько компонентов и один раз и принимать URL-адрес, который является конкатенацией (или какой-либо другой комбинацией) или несколькими маршрутами?

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

Имеет ли React Router возможность для нескольких видимых маршрутов и как такая возможность может быть использована?

Конечно, давайте возьмем для примера

 <Route exact path='/order/:id' component={() => <OrderPage/>}/>
 

Страница заказа вашего компонента может иметь вложенные Route amp; Switch

 const OrderPage = () => {
    return (<>
        <div>
        ....
        </div>
        <Switch>
            <Route exact path='/order/:id/tab1' component={Tab1}/>
            <Route exact path='/order/:id/tab2' component={Tab2}/>
        </switch>
    </>)
}
 

И чтобы это работало и правильно распространяло параметры url, вам нужно удалить exact prop на вашем первом маршруте и иметь все доступные URL в вашем основном маршруте path

 <Route path={['/order/:id/tab1', '/order/:id/tab2', '/order/:id']} component={OrderPage}/>
 

Правильный ответ — НЕТ. Через react-router вы не можете иметь несколько объединенных URL-адресов одновременно для отображения нескольких страниц.

Но это может быть достигнуто путем правильного проектирования маршрутов, например, для примера

Приложения с несколькими вкладками: пользователь хочет работать с несколькими счетами одновременно, и она открывает несколько счетов на вкладках уровня приложения (не на уровне браузера) — каждый счет на каждой странице. Таким образом, она может продолжать редактировать один счет, просматривая данные из другого счета. В конце сеанса использование копирует URL-адрес и отправляет по электронной почте коллеге — она ожидает, что коллега сможет открыть eaxact эти страницы;

 <Route exact path={['/order/:id/', '/order/:id/:refenceId']} component={() => <InvoicePage/>}/>
 

В этом случае вы можете проверить, имеет ли URL referenceId -адрес затем отображаемый счет-фактуру.

или

С помощью параметров запроса. https://reactrouter.com/web/example/query-parameters Добавьте referencedId в параметр запроса, и он может быть общим

Через query-param он может даже поддерживать ваш второй вариант использования.

Switch компонент отображает только один дочерний маршрут, соответствующий текущему местоположению. Поэтому, если вы хотите одновременно отображать несколько Route компонентов, соответствующих текущему местоположению, вы должны опустить Switch .

Например, если вы хотите, чтобы для path отображались как SalesPage, так и InvoicePage /sales/invoice , вы могли бы сделать следующее:

 <>
   <Route path='/sales' component={SalesPage}/>
   <Route path='/sales/invoice' component={InvoicePage}/>
</>