Question

我的app使用了withRouter，而组件使用了路由器

class Routes extends Component {
    render() {
        return (
            <Switch>
                <Route exact path="/" component={Main} />
                <Route exact path="/tv/:id" component={TV} />
            </Switch>
        )
    }
}

组件TV中的

我想使用子路由器，但它不起作用。

这就是我在TV组件中使用的原因。电视组件动态路径

<Link to={`${this.props.location.pathname}/season-${el.season_number}`}>
 <Route path={`/tv/${this.props.match.path}/season-:season_number`} component={TVSeason}/>

Answer 1

尝试使用this.props.match.url动态处理链接和路由：

<Link to={`${this.props.match.url}/season-${el.season_number}`}>
<Route path={`${this.props.match.url}/season-:season_number`} component={TVSeason}/>

Answer 2

路由器将查找切换以查看匹配并加载组件，否则应该是默认组件。

你可以使用：

class Routes extends Component {
render() {
    return (
        <Switch>
            <Route exact path="/" component={Main} />
            <Route exact path="/tv/:id" component={TV} />
            <Route path="/tv/:id/:id" component={TVSeason}/>
        </Switch>
    )
}

}

和TV组件只能使用Link，例如：<Link to={ $ {this.props.location.pathname} / season - $ {el.season_number} }>

如何在react-router4中设置子路由器？

2 个答案: