React Hooks：在“位置”中获取数据，而不是在“链接”的参数中

Question

您好，我正在尝试通过 url 将参数/数据从一页传递到另一页，下面的链接是传递数据的代码。

 {Array.isArray(products) ?
      products.map((product, i) =>
        <tbody>
          <tr>
            <td>{i + 1}</td>
            <Link to={`/campaing/${product._id}`}>
              <td>{product.name}</td>
            </Link>
            <td>Rs: {product.price}</td>
            <td>{product.rating}</td>
          </tr>
        </tbody>
      ) : <h3>No Product Present Add One</h3>
    }

并且在应用程序中所有路由器都存在

 <PrivateRoute path="/user" component={BoardUser} />
        <PrivateRoute path="/campaing/:id" exact component={Campaings} />
        <PrivateRoute path="/mod" component={BoardModerator} />
        <PrivateRoute path="/admin" component={BoardAdmin} />

在campaig路由器中

const {id} = useParams();
  console.log(id + ' -------------------'); //undefined
  
  console.log(props.location.pathname) //campaing/21ye7wqdg3276e

提前致谢。 如果您想了解更多详情，请告诉我。

Answer 1

请访问此链接： 在 React-Router v5.1 中引入的 Hooks

希望这个链接能解决你的问题。

Answer 2

修复了只需要获取 computedMatch 的问题，因为它只是通过 props 从 body 传递位置和数据。

const PrivateRoute = ({ component: Component, computedMatch: match }) => {
const isLoggedIn = JWTDATA();
console.log(match);
return (
    <Route {...match}
        render={props =>
            isLoggedIn ? (
                <Component {...props} />
            ) : (
                <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
            )
        }
    />
)

}