Question

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

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。但它在三元运算符中与/

不匹配

关于我失踪的想法？

Answer 1

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

syndrome_noised = [1,0,1,0]
''.join(str(x) for x in syndrome_noised)

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

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

或者它可以简化为：

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

有关详细说明，请参阅此链接： React router match help

React Router匹配对象null响应问题

1 个答案: