从ReactJS上的this.props.match.params获取未定义的值

Question

我是新开发人员 ReactJS ，我使用前端的 ReactJS ，后端的 NodeJS 和 MySQL 开发了一个表关于数据库的strong>。

我想要在单击“操作”列上的查看按钮时将其重定向到另一个页面，该页面显示一个包含Select查询结果的列表，如下所示：

我的viewClient.js：

$watchCollection

我的路由器：

class ViewClient extends Component {
    constructor(props) {
        super(props);
        this.state = {
            clients:[]

        };
        this.toggle = this.toggle.bind(this);
        this.state = {
            activeTab: '1',
        };
    }

    toggle(tab) {
        if (this.state.activeTab !== tab) {
            this.setState({
                activeTab: tab,
            });
        }
    }
    componentDidMount() {


         axios.get('http://localhost:4000/app/viewclient/' +this.props.match.params.Code)

            .then(response => {
                if (response && response.data) {
                    this.setState({ clients: response.data });
                }
            })
            .catch(error => console.log(error));
    } 

    render() {
        let { clients } = this.state;
        // let { clients } = this.state;
        return (
            <div className="animated fadeIn">
        <Row>

           <Col xs="12" md="6" className="mb-4">
            <Nav tabs>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '1' })}
                  onClick={() => { this.toggle('1'); }}
                >
                  <i className="fa fa-info"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Détails</span>
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '2' })}
                  onClick={() => { this.toggle('2'); }}
                >
                  <i className="fa fa-credit-card"></i> <span
                  className={this.state.activeTab === '2' ? '' : 'd-none'}> Factures</span>
                </NavLink>
              </NavItem>
              <NavItem>
                <NavLink
                  className={classnames({ active: this.state.activeTab === '3' })}
                  onClick={() => { this.toggle('3'); }}
                >
                  <i className="fa fa-truck"></i> <span className={this.state.activeTab === '3' ? '' : 'd-none'}> Bons de livraison</span>
                </NavLink>
              </NavItem>
            </Nav>
            <TabContent activeTab={this.state.activeTab} style={{ height:"420px"}}>
              <TabPane tabId="1">
               <ul>
               {
                       clients &&  clients.map(client => (
                            <li key={client.Code}>
                         <h1> Code client :    {client.Code} </h1>
                             {client.Prenom}
                              {client.Nom}
                              {client.FAX}
                             {client.Telephone}
                               {client.Email}
                                {client.Adresse1}
                                 {client.Adresse2}
               </li>
               ))}
               </ul>
              </TabPane>
              <TabPane tabId="2">

              </TabPane>
              <TabPane tabId="3">

              </TabPane>
            </TabContent>
          </Col>

        </Row>
      </div>
        );
    }
}

export default ViewClient;

我的服务器：

exports.viewclient = function(req, res) {
  var Code = req.params.Code;
    console.log(req.params);

    connection.query('SELECT Code, Prenom, Nom, FAX, Telephone, Email, Adresse1, Adresse2  FROM clients  WHERE Code = ?',[req.params.Code],  function(error, results, fields) {
        if (error) throw error;
        res.send(JSON.stringify(results));
console.log(results);
    });

}

当我运行后端时，它与带有URL var express = require("express"); var login = require('./routes/loginroutes'); var clients = require('./routes/clientroutes'); var cors = require('cors'); var bodyParser = require('body-parser'); var app = express(); app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); app.use(function(req, res, next) { res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000/'); res.setHeader('Access-Control-Allow-Credentials', true); res.setHeader('Access-Control-Allow-Methods', ['PATCH', 'POST', 'GET', 'DELETE', 'PUT']); res.setHeader('Access-Control-Allow-Headers', ['Content-Type']); res.setHeader('Access-Control-Expose-Headers', ['Content-Type']); /* res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");*/ next(); }); app.use(cors()); var router = express.Router(); // test route router.get('/', function(req, res) { res.json({ message: 'welcome to our upload module apis' }); }); //route to handle user registration router.post('/register', login.register); router.post('/login', login.login); router.post('/ajouterclient', clients.ajouterclient); router.get('/listeclients', clients.listeclients); router.get('/viewclient/:Code', clients.viewclient); router.get('/editclient', clients.editclient); //route to handle file printing and listing app.use('/app', router); app.listen(4000); 的 Postman 一起很好地工作，并且返回http://localhost:4000/app/viewclient/1111，但是当我使用ReactJS运行它时，它将重定向到{ {1}}，但不显示任何内容，[{"Code":1111,"Prenom":"test","Nom":"test","FAX":"58985688888","Telephone":"58985699888","Email":"test@gmail.com","Adresse1":"","Adresse2":""}]返回http://localhost:3000/app/viewclient/

请问如何解决？