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' }还是Link to={'/edit' }（在这种情况下，URL仅为/edit），它始终返回空白页。我已经测试过该表单组件是否正常工作，因此我的路由方法确实应该有问题。

感谢您的帮助。

React Router返回黑屏

0 个答案: