В документации по реагирующему маршрутизатору здесь говорится:

Рассмотрим этот код:

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>

Если URL-адрес /about, то <About>, <User> и <NoMatch> будут отображаться, поскольку все они соответствуют пути.

Как все они соответствуют пути /about? Я не понимаю, почему это так, если у пользователя нет имени пользователя about. Чего мне не хватает?

4
Adzz 24 Апр 2017 в 12:42

2 ответа

Лучший ответ

Линия

<Route path="/:user" component={User}/>

Означает, что все после / будет передано в this.props.params.user переменную component и компонент User будет обработан.

Правило сопоставления действует только в том случае, если данное path соответствует вашему шаблону path=, его не волнует, существует ли ресурс на самом деле. Если я получу путь, начинающийся с {{X2} } и за переменной следует текст, текст будет проанализирован как параметр параметра маршрута user и User будут обработаны и все. Так что да, в этом случае this.props.params.user будет иметь значение «about», но как вы будете обрабатывать переменную и что вы будете отображать в случае, если user такое имя не найдено, полностью зависит от вас.

Я думаю, что они просто пытаются сказать, что в случае, если у вас есть больше шаблонов, которые обычно сопоставляются одновременно, вы должны использовать компонент <Switch>, чтобы фактически отображалось только первое совпадение.

Так, например когда используется <Switch>:

A) и путь /about, правило

<Route path="/about" component={About}/>

Будет сопоставлен, и About будет обработан компонент, и больше не будет выполняться оценка.

B) , если путь /something, правило

<Route path="/about" component={About}/>

Не будет соответствовать, но правило:

<Route path="/:user" component={User}/>

Будет сопоставлен, и компонент User будет отображен с something в качестве параметра this.props.params.user, и больше не будет выполняться оценка.

C) Если путь /, то правила

<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>

Не будет соответствовать, но

<Route component={NoMatch}/>

Будет и NoMatch компонент будет визуализирован.

Напротив, когда не используется <Switch>, если ваш путь /about:

<Route path="/about" component={About}/>

Будет соответствовать, потому что это правило соответствует всем маршрутам, пути которых равны /about.

<Route path="/:user" component={User}/>

Также будет найдено совпадение, потому что это правило соответствует всем маршрутам, которые начинаются с /, и за ними следует текст.

<Route component={NoMatch}/>

Слишком подходящее, потому что это правило не заботится о пути, оно всегда совпадает.

4
Matej P. 24 Апр 2017 в 10:53

Поскольку они не содержатся в элементе <switch>...</switch>, все они оцениваются и оцениваются независимо.

Маршрутизатор не знает пользователей в системе - он только ищет совпадения строк в пути.

Что-то вроде:

if (path === '/about') { return 'About' }
if (typeof path === 'String') { return 'User' }
if (true) { return 'noMatch' }
0
olmesm 24 Апр 2017 в 10:22
43584748