javascript - 反应路由器：pushstate后的空白页面

Question

我们有一个用于内部门户的自定义 JS 框架，我正在尝试使用状态访问 React 应用程序。

在我的门户中，在菜单上，我有以下代码：

<a onclick="history.pushState(null, 'newstate', '/persons');">Persons</a>

我们侦听状态更改事件，感谢window.onpopstate. 当它发生时，我们附加与新状态相关的 JS 应用程序。

所以当我点击时，它会生成以下网址：

http://localhost:3000/persons

多亏了这段代码，因为我的 React 应用程序包含在“脚本”标签中，并且当我们检测到状态变化时，我们将 React 应用程序附加到 DOM。以下是在新导入的 React App 中定义路由器的方式：

import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import PersonsList from './PersonsList';
import Error from './Error'
import Person from './Person'

const Router = () => (
    <BrowserRouter>
        <Switch>
            <Route path="/" strict={false} component={PersonsList}/>
            <Route path="/persons/:id" component={Person}/>
            <Route component={Error}/>
        </Switch>
    </BrowserRouter>
);

export default Router;

当它触发该pushState功能时，第一个路由从门户的主菜单工作，React 应用程序显示，然后第一个定义的路由运行。

问题是PersonsList，当我尝试到达/persons/:id路线时，我得到一个空白页。

这是我在 PersonsList 组件中用于重定向的代码：

static propTypes = {
    history: PropTypes.object
};

handleRedirection = (aPerson) => {
    this.props.history.push(`/persons/${aPerson.id}`);
}

...

{this.state.persons.map(aPerson => (
    <React.Fragment key={aPerson.id}>
        <div className="row" onClick={this.handleRedirection.bind(this,aPerson)}>

编辑 1： 在第一条评论之后，我将exact关键字放在路线中。但我仍然得到一个空白页。

这是Person组件：

import React from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';

class Person extends React.Component {
    static propTypes = {
        match: PropTypes.object 
    };

    constructor(props){
        super(props);
        console.log('the selected person : ' + this.props.match.params.id);
    }

    render(){
        return(
            <div>A person</div>
        )
    }
}


export default withRouter(Person);

我可以看到console.log输出，但没有渲染<div>A person</div>.

问题 为什么第二条路线返回空白内容？

标签： javascriptreactjsrouting