Question

如果我有这样的话：

<ConnectedRouter history={history}>
    <App />
</ConnectedRouter>

我的路线配置如下：

export default [{
    path: '/',
    exact: true,
    main: Home
}, 
{
    path: '/:someId',
    exact: true,
    main: Profile
},
{
    path: '*',
    main: NotFound
}];

其中app只是路由和其他组件的包装，如：

class App extends Component {
render() {
return (
  <div>
    <Header />
    <Switch>
      {routes.map((route, i) => <Route exact key={i} component={route.main} path={route.path}/>)}
    </Switch>
    <AnotherComponent {...this.props} />
  </div>
);
}
}

AnotherComponent有没有办法使用match.params或公开那些？我已经尝试用 withRouter 包装组件，并将其添加为Route，没有匹配的路径：

<Route component={AnotherComponent} />

当路由是/：someId时它确实渲染了Profile和AnotherComponent，但是AnotherComponent的match.params是空的：/。

这可能吗？谢谢！

Answer 1

如果您在路线上有路径，则React路由器将仅返回参数。你可以从顶层传递参数。让该组件在其中呈现。它可以访问参数。至于任何其他时间，你需要做：

<Route  path="/:someId" component={AnotherComponent} />

如果你想让它真正得到那个参数！

只有Route组件下方的子项才能访问参数。您应该以这样的方式构建应用程序：只有该路径中的组件需要它的参数。

Answer 2

您可以使用matchPath

import { matchPath } from 'react-router'
import { useLocation } from 'react-router-dom'

 //----
const { pathname } = useLocation()

const params =  matchPath(pathname, { path:"/:someId" })
 //----

有没有办法在<route>组件外部公开路径参数？

2 个答案: