Проблемы с нулевым ответом объекта сопоставления React Router
Я пытаюсь определить, почему я не могу использовать тернарный оператор с соответствием в маршрутизаторе реакции, чтобы определить, когда совпадение равно нулю.
import React from 'react';
import ReactDOM from 'react-dom';
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Resource = ({ match }) => {
return (
<div>
<h3>Test {match != '' ? match.params.id : "no match!" }</h3>
</div>
)
};
const jsx = (
<Router>
<div>
<ul>
<li><Link to = "/">Home</Link></li>
<li><Link to = "/FandA">Finishes And Accessories</Link></li>
<li><Link to = "/CO">Complete Order</Link></li>
<li><Link to = "/Re">Resources</Link></li>
</ul>
<Route path = "/:id" component = {Resource}/>
</div>
</Router>
);
ReactDOM.render(jsx, document.getElementById('app'));
Маршрутизация отлично работает для / FandA, / CO и / Re. Но он не соответствует нулю в тернарном операторе для /
Любые идеи о том, что мне не хватает?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В React Router 4 свойство матч имеет тип объекта, а не строку. Вы ожидаете, что это будет совпадающий маршрут, но это не так. матч prop - это объект вроде этого:
{
"path": "/:id",
"url": "/FandA",
"isExact": true,
"params": {}
}
Следовательно, ваше тернарное условие должно быть:
(match.params && match.params.id) ? match.params.id : "no match!"
Или это можно упростить до:
match.params.id || "no match!"
Перейдите по этой ссылке для более подробного описания: React router матч help
@Chadimoglou, упомянутый вами маршрут будет соответствовать, только если указан параметр id, а не если вы находитесь на домашнем маршруте. Вы должны сделать его необязательным параметром, чтобы он мог соответствовать даже на домашнем маршруте. Рассмотрим этот код: codeandbox.io/s/olkxr0mppz Что касается нулевого совпадения, этого не должно происходить, если вы используете React Router 4, пожалуйста, проверьте версию React Router. Чтобы понять, что такое нулевое совпадение, просмотрите эту документацию: reacttraining.com/react-router/web/api/match/null-matches
Привет, Хридай, спасибо за ответ. Однако у меня все еще та же проблема. Причина, по которой я проверял '', заключается в том, что, когда я смотрел на Route в React Tools, он показывает match: null (я тоже пробовал null). Я сделал скриншот здесь: dropbox.com/s/6kgl261refu60po/null.png?dl=0