我想在 <AppBar />
中显示一个从当前路由传入的 title
。
在 React Router v4 中,<AppBar />
如何将当前路由传递到它的 title
属性中?
<Router basename='/app'>
<main>
<Menu active={menu} close={this.closeMenu} />
<Overlay active={menu} onClick={this.closeMenu} />
<AppBar handleMenuIcon={this.handleMenuIcon} title='Test' />
<Route path='/customers' component={Customers} />
</main>
</Router>
有没有办法从 <Route />
上的自定义 prop
传递自定义标题?
在 react-router 的 5.1 版本中有一个叫做 useLocation 的钩子,它返回当前的位置对象。这在您需要知道当前 URL 的任何时候都可能有用。
import { useLocation } from 'react-router-dom'
function HeaderView() {
const location = useLocation();
console.log(location.pathname);
return <span>Path : {location.pathname}</span>
}
在反应路由器 4 中,当前路由位于 - this.props.location.pathname
。只需获取 this.props
并验证。如果您仍然看不到 location.pathname
,那么您应该使用装饰器 withRouter
。
这可能看起来像这样:
import {withRouter} from 'react-router-dom';
const SomeComponent = withRouter(props => <MyComponent {...props}/>);
class MyComponent extends React.Component {
SomeMethod () {
const {pathname} = this.props.location;
}
}
window.location.pathname
如果您使用的是 react 的模板,那么您的 react 文件的结尾如下所示:export default SomeComponent
您需要使用高阶组件(通常称为“HOC”),withRouter
。
首先,您需要像这样导入 withRouter
:
import {withRouter} from 'react-router-dom';
接下来,您需要使用 withRouter
。您可以通过更改组件的导出来做到这一点。您可能想从 export default ComponentName
更改为 export default withRouter(ComponentName)
。
然后你可以从道具中获取路线(和其他信息)。具体来说,location
、match
和 history
。吐出路径名的代码是:
console.log(this.props.location.pathname);
此处提供了包含附加信息的优秀文章:https://reacttraining.com/react-router/core/guides/philosophy
react-router v5中有一个叫做useLocation的钩子,不需要HOC或其他东西,非常简洁方便。
import { useLocation } from 'react-router-dom';
const ExampleComponent: React.FC = () => {
const location = useLocation();
return (
<Router basename='/app'>
<main>
<AppBar handleMenuIcon={this.handleMenuIcon} title={location.pathname} />
</main>
</Router>
);
}
这是使用 history
Read more 的解决方案
import { createBrowserHistory } from "history";
const history = createBrowserHistory()
内部路由器
<Router>
{history.location.pathname}
</Router>
this.props....
对我们来说只是噪音。
Con Posidielov 说过,当前路线存在于 this.props.location.pathname
中。
但如果您想匹配更具体的字段,例如键(或名称),您可以使用 matchPath 来查找原始路由参考。
import { matchPath } from `react-router`
const routes = [{
key: 'page1'
exact: true,
path: '/page1/:someparam/',
component: Page1,
},
{
exact: true,
key: 'page2',
path: '/page2',
component: Page2,
},
]
const currentRoute = routes.find(
route => matchPath(this.props.location.pathname, route)
)
console.log(`My current route key is : ${currentRoute.key}`)
matchPath(route.path, this.props.location.pathname)
,如 there 所述
我认为 React Router (v4) 的作者只是添加了 withRouter HOC 来安抚某些用户。但是,我相信更好的方法是只使用渲染道具并制作一个简单的 PropsRoute 组件来传递这些道具。这更容易测试,因为它不像 withRouter 那样“连接”组件。将一堆嵌套组件包裹在 withRouter 中,这不会很有趣。另一个好处是你也可以通过你想要的任何道具来使用这个通道。这是使用渲染道具的简单示例。 (几乎是他们网站 https://reacttraining.com/react-router/web/api/Route/render-func 中的确切示例)(src/components/routes/props-route)
import React from 'react';
import { Route } from 'react-router';
export const PropsRoute = ({ component: Component, ...props }) => (
<Route
{ ...props }
render={ renderProps => (<Component { ...renderProps } { ...props } />) }
/>
);
export default PropsRoute;
用法:(注意获取路由参数(match.params)你可以只使用这个组件,这些将被传递给你)
import React from 'react';
import PropsRoute from 'src/components/routes/props-route';
export const someComponent = props => (<PropsRoute component={ Profile } />);
还请注意,您也可以通过这种方式传递您想要的任何额外道具
<PropsRoute isFetching={ isFetchingProfile } title="User Profile" component={ Profile } />
添加
import {withRouter} from 'react-router-dom';
然后更改您的组件导出
export default withRouter(ComponentName)
然后,您可以使用以下方法直接在组件本身内访问路由(无需触及项目中的任何其他内容):
window.location.pathname
2020 年 3 月测试:“版本”:“5.1.2”
redirect
,这也将不起作用。这将在重定向之前读取路径const
而不是let
,因为我们知道它在这种情况下不会改变?