Question

这个问题与React router v4有关。

这是我的App组件：

export default function() {
    return (
        <ApolloProvider client={apolloClient}>
            <Router onUpdate={() => window.scrollTo(0, 0)}>
                <ScrollToTop>
                <Grid>
                    <TopBar>
                        ...
                    </TopBar>
                    <SideBar>
                        <SideBarHeader>Classes</SideBarHeader>
                        <ClassList/>
                    </SideBar>
                    <Main>
                        <Switch>
                            <Route path="/class/:id" component={ClassDoc}/>
                        </Switch>
                    </Main>
                    <Footer>
                        ...
                    </Footer>
                </Grid>
                </ScrollToTop>
            </Router>
        </ApolloProvider>
    )
}

<Main>内容正确呈现。但是，在我的<ClassList/>中，我希望能够访问＆＃34;类ID＆＃34; （与下面<Route>中使用的相同）。

我不想做

<Route path="/class/:id" component={ClassList}/>

因为我想无条件地呈现ClassList，无论该路径是否匹配。如果有id可用，我只想强调一些内容。

我尝试使用withRouter，但它给了我

{path: "/", url: "/", params: {}, isExact: false}

而不是/ class路由。即缺少参数的根路线。

那么如何将课程ID提升为ClassList？

目前，我已经复制了Switch两次，但这对可维护性没有好处。

<SideBar>
    <SideBarHeader>Classes</SideBarHeader>
    <Switch>
        <Route path="/class/:classId(\d+)::releaseId(\d+)" render={({match:{params}}) => <ClassList {...params}/>}/>
        <Route path="/class/:classId(\d+)" render={({match:{params}}) => <ClassList {...params}/>}/>
        <Route component={ClassList}/>
    </Switch>
</SideBar>
<Main>
    <Switch>
        <Route path="/class/:classId(\d+)::releaseId(\d+)" render={({match:{params}}) => <ClassDoc {...params}/>}/>
        <Route path="/class/:classId(\d+)" render={({match:{params}}) => <ClassDoc {...params}/>}/>
    </Switch>
</Main>

Answer 1

因此withRouter应该有效（或<Route>{()=>}</Router>，请参阅：https://reacttraining.com/react-router/web/api/Route/children-func）

您的侧边栏中是否有shouldComponentUpdate或还原connect？这可能会阻止withRouter更新。

如何在堂兄组件中获取路由参数？

1 个答案: