我想在<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 />上的自定义道具传递自定义标题?
当前回答
如果你正在使用react的模板，你的react文件的结尾看起来像这样:导出默认的SomeComponent，你需要使用更高阶的组件(通常称为“HOC”)，与throuter。
首先，你需要像这样用throuter导入:
import {withRouter} from 'react-router-dom';
接下来，您将希望使用withthrouter。您可以通过更改组件的导出来实现这一点。您可能希望将导出默认的ComponentName更改为使用throuter (ComponentName)导出默认。
然后你可以从道具中获得路线(和其他信息)。具体来说，是位置、匹配和历史。输出路径名的代码是:
console.log(this.props.location.pathname);
你可以在这里找到一篇包含更多信息的文章:https://reacttraining.com/react-router/core/guides/philosophy
其他回答
在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}`)
在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 { createBrowserHistory } from "history";
const history = createBrowserHistory()
在路由器
<Router>
{history.location.pathname}
</Router>
Add
import {withRouter} from 'react-router-dom';
然后更改组件导出
export default withRouter(ComponentName)
然后你可以直接在组件本身中访问路由(不涉及项目中的任何其他内容)，使用:
window.location.pathname
2020年3月测试，“版本”:“5.1.2”
