有没有办法在 <Route> 组件之外公开路由参数？

Question

如果我有这样的东西：

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

我的路线配置如下：

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

其中应用程序只是路由和其他组件的包装器，例如：

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 component={AnotherComponent} />

当路由为 /:someId 时，它会同时呈现 Profile 和 AnotherComponent，但是 match.params AnotherComponent 是空的 :/.

这可能吗？谢谢！

Answer 1

React router 只会 return params 如果你在 Route 上有路径。您可以从顶层传递参数。让该组件在其中呈现。它将有权访问参数。至于任何其他时间，您需要做的是：

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

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

只有 Route 组件下的 children 可以访问参数。您应该以只有该路由内的组件需要其参数的方式构建您的应用程序。

Answer 2

编辑：这些天你可以直接使用https://v5.reactrouter.com/web/api/Hooks/useroutematch。

原答案

您可以使用matchPath

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

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

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

Answer 3

您可以像这样用它自己的 Route 组件包装该组件：

...  
<Route path="/cameras/:camera/">
  <CameraName />
</Route>
...

// this is so the camera name can be fetched from the route.
const CameraName = () => {
  let { camera } = useParams();
  return <div>{camera}</div>;
};

有没有办法在 <Route> 组件之外公开路由参数？

Is there a way to expose route params outside <Route> component?

javascript

reactjs

react-router-redux

react-router-v4

react-router-dom

原答案