React路由器v4 -如何获得当前路由?

我想在<AppBar />中显示一个title，它以某种方式从当前路由传递进来。

在React路由器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传递自定义标题?

520075 次浏览
小开

在react router 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;
}
}
小开
我认为React路由器(v4)的作者只是添加了throuter HOC来安抚某些用户。然而，我认为更好的方法是只使用渲染道具，并制作一个简单的PropsRoute组件来传递这些道具。这更容易测试，因为它不像throuter那样“连接”组件。如果在throuter中封装了一堆嵌套组件，那就不好玩了。另一个好处是，你也可以通过任何你想要的道具来使用这个通道。下面是使用渲染道具的简单示例。(基本上就是他们网站https://reacttraining.com/react-router/web/api/Route/render-func的例子) (src /组件/线路/ props-route) < / p > 
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的模板，你的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

小开

下面是一个使用history 阅读更多的解决方案

import { createBrowserHistory } from "history";


const history = createBrowserHistory()

在路由器

<Router>
{history.location.pathname}
</Router>
小开

反对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}`)
小开

在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>
);
}
小开

添加

import {withRouter} from 'react-router-dom';

然后更改组件导出

export default withRouter(ComponentName)

然后你可以直接在组件本身中访问路由(不涉及项目中的任何其他内容)，使用:

window.location.pathname

2020年3月测试，“版本”:“5.1.2”

小开
最佳答案

在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>
}

提交答案