Question

我有以下设置（只是重要部分）：

App.jsx

<Provider store={store}>
    <ConnectedRouter history={history}>
        <div>
            <Navigation />

            <main>
                <Route exact path="/" component={Home} />
                <Route path="/books" component={Books} />
            </main>
        </div>
    </ConnectedRouter>
</Provider>

Books.jsx

<Route exact path="/books" component={BookList} />
<Route exact path="/books/:bookId" component={BookDetails} />

现在我想在bookId组件中获取<Navigation/>参数。当我尝试withRouter时，我只获得"/"匹配，因此没有params。此外，路由器的redux存储仅保留完整的位置路径。

是否可以或者我必须使用整个位置路径并以某种方式解析它？

Answer 1

这里要注意的一件重要事情是，使用withRouter高阶组件，您可以访问历史对象的属性以及最接近的<Route>'s匹配，在您的情况下是/对于ConnectedRouter，

您可以使用react-router

中的matchPath来获取参数

const {hash} = window.location
const customMatch = matchPath(hash, {
    path: `/books/:bookId`,
    exact: true,
    strict: false
});
let bookId;
if (customMatch) {
    ({ bookId } = customMatch.params);
}

访问当前匹配来自任何组件的react-router参数

1 个答案: