我想在<AppBar />中显示一个标题，该标题以某种方式从当前路由传递进来。
在React Router v4中，<AppBar />如何能够将当前路由传递到它的标题道具中?
<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 />上的自定义道具传递自定义标题?
当前回答
Add
import {withRouter} from 'react-router-dom';
然后更改组件导出
export default withRouter(ComponentName)
然后你可以直接在组件本身中访问路由(不涉及项目中的任何其他内容)，使用:
window.location.pathname
2020年3月测试，“版本”:“5.1.2”
其他回答
这里有一个使用历史的解决方案阅读更多
import { createBrowserHistory } from "history";
const history = createBrowserHistory()
在路由器
<Router>
{history.location.pathname}
</Router>
在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>
}
I think the author's of React Router (v4) just added that withRouter HOC to appease certain users. However, I believe the better approach is to just use render prop and make a simple PropsRoute component that passes those props. This is easier to test as you it doesn't "connect" the component like withRouter does. Have a bunch of nested components wrapped in withRouter and it's not going to be fun. Another benefit is you can also use this pass through whatever props you want to the Route. Here's the simple example using render prop. (pretty much the exact example from their website 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 } />
在react路由器4中，当前路由在-中 this.props.location.pathname。 就这样吧。道具和验证。 如果您仍然没有看到位置。那么你应该使用带有throuter的装饰器。
这可能看起来像这样:
import {withRouter} from 'react-router-dom';
const SomeComponent = withRouter(props => <MyComponent {...props}/>);
class MyComponent extends React.Component {
SomeMethod () {
const {pathname} = this.props.location;
}
}
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}`)
