Reactjs 反应路由器：空白页

下面是我如何定义路由器的：

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="/persons" strict={false} component={PersonsList}/>
            <Route path="/persons/:id" component={Person}/>
            <Route component={Error}/>
        </Switch>
    </BrowserRouter>
);

export default Router;

以下是

Person

组件：

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)}>

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);

从“React”导入React；
从“道具类型”导入道具类型；
从“react router”导入{withRouter}；
类Person扩展React.Component{
静态类型={
匹配：PropTypes.object
};
建造师（道具）{
超级（道具）；
console.log（'所选人员：'+this.props.match.params.id）；
}
render（）{
返回(
人
)
}
}
使用路由器导出默认值（个人）；

我可以看到

console.log

输出，但没有呈现

个人

问题

---

为什么第二个路由在知道调用了其组件的构造函数的情况下返回空白内容？为什么不处理渲染？

我尝试了这个.props.history.push（“/home”）；代码部分，但运行不正确

您可以在下面看到我的部件代码。 我的完整组件代码：

class Full extends Component {
    render() {
        return (
            <div className="app">
                <Header/>
                <div className="app-body">
                    <Sidebar {...this.props}/>
                    <main className="main">
                        <Breadcrumb/>
                        <Container fluid>
                            <Switch>
                                <Route path="/dashboard" name="Dashboard" component={Dashboard}/>
                                <Route path="/applications" name="Applications" component={Applications}/>
                                <Route path="/roles" name="Roles" component={Roles}/>
                                <Route path="/poc" name="poc" component={Poc}/>
                                <Redirect from="/home" to="/dashboard"/>
                            </Switch>
                        </Container>
                    </main>
                    <Aside/>
                </div>
                <Footer/>
            </div>
        );
    }
}

---

我看不出你的代码有什么问题，但是。也许你可以看看它有什么不同？当我尝试从

PersonList

导航到

Person

时，我的问题出现了。第一次加载工作得很好。它确实

this.props.history.push（'/persons/testing'）在我的示例中。将其与您的代码进行比较，看看您是否看到了不同之处。谢谢。如上所述：调用目标组件的构造函数。我唯一的问题是渲染。我不知道为什么什么都没出现。
class Dashboard extends Component {
  constructor(props) {
    super(props);
  }
  render() {

    return (
      <div className="animated fadeIn">
        <div>test</div>
      </div>
    )
  }
}

export default Dashboard;

import {createBrowserHistory} from 'history';
export const history = createBrowserHistory();