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>的呈现。

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

React Router：PushState之后的空白页

0 个答案: