React Router匹配对象null响应问题

Posted 2021-04-06

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

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不匹配/

关于我缺少的任何想法？

答案

在React Router 4中，匹配prop是object类型而不是string。你期望它是匹配的路线但事实并非如此。 match prop是这样的对象：

{
    "path": "/:id",
    "url": "/FandA",
    "isExact": true,
    "params": {}
}

因此，你的三元条件应该是：

(match.params && match.params.id) ? match.params.id : "no match!"

或者它可以简化为：

match.params.id || "no match!"

有关更多详细说明，请参阅此链接：qazxsw poi