路由器在反应路由器领域有什么用？

我有 有时会看到的人包装他们的组件在 withRouter时，他们出口他们:

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


class Foo extends React.Component {
// ...
}


export default withRouter(Foo);

这是干什么用的，什么时候用？

162895 次浏览
小开
最佳答案

当你在你的应用程序中包含一个主页面组件时，它通常包装在一个 <Route>组件中，如下所示:

<Route path="/movies" component={MoviesIndex} />

通过这样做，MoviesIndex组件可以访问 this.props.history，这样它就可以用 this.props.history.push重定向用户。

有些组件(通常是头部组件)出现在每个页面上，所以不包装在 <Route>中:

render() {
return (<Header />);
}

这意味着标头不能重定向用户。

为了解决这个问题，头部组件可以包装在一个 withRouter函数中，无论是在导出时还是在导出时:

export default withRouter(Header)

这使得 Header组件可以访问 this.props.history，这意味着头部现在可以重定向用户。

小开

withRouter是一个更高阶的组件，它将通过最近的路由的 match，当前的 location和 history道具到包装的组件，只要它呈现。它只是将组件连接到路由器。

并非所有的组件，特别是共享组件，都可以访问这种路由器的支持。在其封装的组件内部，您将能够访问 location道具和获得更多的信息，如 location.pathname或使用 this.props.history.push将用户重定向到不同的 URL。

下面是他们的 github 页面中的一个完整例子:

import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";


// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
};


render() {
const { match, location, history } = this.props;


return <div>You are now at {location.pathname}</div>;
}
}


// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);

更多的信息可以找到 给你。

小开

WithRouter 是一个高阶组件，它将传递最接近的路由，以获得对某些属性的访问权限，比如位置，并且只有给组件提供位于组件中的属性时，才能从道具中访问它

<Route to="/app" component={helo} history ={history} />

同样的匹配和位置繁荣能够改变位置并使用 this. prop.history. push 它应该被提供给每个组件属性必须提供，但是当使用 WithRouter 时，它可以访问位置和匹配而不需要添加属性历史，它可以访问方向而不需要添加每个路由的属性历史。

小开

withRouter高阶组件允许您访问 history对象的属性和最接近的 <Route>匹配。无论何时，withRouter都会将更新后的 match、 location和 history道具传递给被包装的组件。

import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";


// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
};


render() {
const { match, location, history } = this.props;


return <div>You are now at {location.pathname}</div>;
}
}


// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);
小开

它是一个更高阶的组件，每当呈现被包装的组件时，它都会将更新后的匹配、位置和历史道具传递给它。 但我认为它已经通过反应路由器 V6.在使用其属性的情况下，你可以同时使用 useLocation或 useHistory挂钩。

下面是一个微小的高阶组件，它使用这两个钩子来实现 withRouter的行为:

export function withRouter(Children){
return(props)=>{
const location = useLocation();
const history= useHistory();
return <Children {...props} history= {history} location = {location}
/>
}
}
小开

默认情况下，反应路由器不会将其所有信息传递给我们所引用的组件

例如 如果我们在一个组件上有一条路线，像下面这样

 <Route path="/details/:id">
<Details />
</Route>

我们需要一些道具从路由器，所以我们将不得不使用路由器 要使用它，我们必须先导入它

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

然后在导出组件时使用它

export default withRouter(Details);

提交答案