javascript - React Router 匹配对象空响应问题

Question

我试图确定为什么我不能在 react 路由器中使用带有匹配的三元运算符来确定匹配何时为空。

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 运行良好。但它与/

的三元运算符中的 null 不匹配

对我缺少的东西有什么想法吗？

Answer 1

在 React Router 4 中，match 属性是对象类型，而不是字符串类型。您期望它是匹配的路线，但事实并非如此。 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