reactjs - 反应路由器返回空白屏幕

Question

即使浏览几个 react-router-dom 示例，似乎也无法弄清楚出了什么问题......

所以这是我的主页：

class MyPage extends Component {
render () {
    return (
        <Aux>
            <NavigationHeader />
            <Switch>
                <Route path="/me" exact component={PersonalInfoContainer}/>
                <Route path="/exps" component={ExpsContainer}/>
            </Switch>
            {/* <ExpsContainer /> */}
        </Aux>
    );
}

我想创建一个页面来显示用户的一些个人信息作为/me页面。所以这里是PersonalInfoContainer：

class PersonalInfoContainer extends Component {
componentDidMount () {
    console.log("PI container: ", this.props);
}

render () {
    return (
        <Aux>
            <Link to={this.props.match.url + '/edit' }>EDIT</Link>
            <Switch>
                    <Route path={this.props.match.url + '/edit'} component={PersonalInfoForm}/>
                    <Route path={this.props.match.url} component={PersonalInfoDetail}/>

            </Switch>
        </Aux>
    )
}
}

这就是问题所在，我想要做的是有一个EDIT按钮，该按钮导致一个输入表单，让用户修补他们的信息。我假设使用此设置，链接应该是/me/edit，但无论我使用Link to={this.props.match.url + '/edit' }or Link to={'/edit' }（在这种情况下，url 是简单的/edit），它总是返回一个空白页面。我已经测试了该表单组件是否可以正常工作，因此我的路由方法确实应该有问题。

谢谢你的帮助。

标签： reactjsreact-routerreact-router-dom