Проблемы с нулевым ответом объекта соответствия React Router - PullRequest
Новая
       33

Проблемы с нулевым ответом объекта соответствия React Router

0 голосов
/ 09 июня 2018

Я пытаюсь определить, почему я не могу использовать троичный оператор с match в match router, чтобы определить, когда match равно null. 

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.Но это не соответствует нулю в троичном операторе для /

Есть идеи о том, что мне не хватает?

1 Ответ

0 голосов
/ 09 июня 2018

В React Router 4 match prop имеет тип объекта, а не строку.Вы ожидаете, что он будет соответствовать маршруту, но это не так. match 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 match help

...