如何在 history.push in React-Router 中传递状态

Question

我无法使用 react-router dom 的 useHistory history.push 方法通过状态发送参数。

现在假设我想传递给分页组件的不仅仅是一个字符串，即一些道具。

未定义为状态值状态抛出错误的分页组件

const PAGING = ({ location }) => {
console.log(location);
console.log(location.state);
console.log(location.state.id);
return <div>Hello <div>}

另一个组件中的 History.push 方法

const handleDetails = (id,name) => {
console.log(name)
if (id) {
return history.push({
pathname: `/detailing/${name}`,
state: { id }
});
} else {
return history.push("/");
}
};

const Switch = () => {
const { state: authState } = useContext(AuthContext)
return (
<div>
<Router>
<Switch>
<ProtectedSystem
path= "/detailing/:name"
exact
auth={authState.isAuthenticated}
component={PAGING}
/> 
</Switch>
</Router>
</div>
);
const ProtectedSystem = ({auth , component: Component, ...rest}) =>{
return(
<Route 
{...rest}
render={() => auth ?  (<Component/>) : (<Redirect to = '/' /> )}
/>
)
} 

如果我使用基于其工作正常的无条件简单路线

<Route path= "/detailing/:name" exact component={PAGING} /> 

Answer 1

您需要将 Route 参数传递给渲染组件，以便它可以使用它们

const ProtectedSystem = ({auth , component: Component, ...rest}) =>{
return(
<Route 
{...rest}
render={(routeParams) => auth ?  (<Component {...routeParams}/>) : (<Redirect to = '/' /> )}
/>
)
} 

Answer 2

你可以完全使用 React 钩子和纯函数来做到这一点，例如。

import React from 'react';
import { useHistory } from 'react-router-dom';
const ProtectedSystem = ({ auth }) => {
const history = useHistory();
if (!authUser) {
history.push("/signin");
}
return (
<div><h1>Authorized user</h1></div>
)
}
export default ProtectedSystem