Question

我正在尝试使用'：group'将状态传递到以下路由。有可能吗？

Router.js文件（部分）：

   const [ groups, setGroups ] = useState([])

    useEffect( () => {
        const result = () => {
            fetch("http://localhost:5000/groups", {method: "GET"})
                .then(response => response.json())
                .then(data => setGroups(data.groups))
                .catch(err => {
                    console.error(err)
                })
            }
            result()
    }, [])

    return (
       <Route 
           exact 
           path={`/groups/:group`} 
           render={ routeProps => 
              <GroupDetails 
                   routeProps={routeProps} 
          /> } 
       />
    )

GroupDetails页面：只需输入必要的代码

const GroupDetails = ({routeProps, userId }) => {

    const [ details, setDetails ] = useState(routeProps.location.state)

现在，在我的论坛页面上，如果我单击一个特定的论坛，它将带我到该页面。但是，如果键入“ www.website.com/groups/groupname”，则将是未定义的，因为routeProp.location.state中没有任何内容。

我正在考虑仅在顶部组件上设置groupId状态，并在每次单击组页面时执行setGroupId，然后将其作为/groups/${groupId}传递给路径名。我可以看到它正在工作，但是我想知道是否可以使用React Router来做到这一点。

谢谢

Answer 1

好吧，您可以使用withRouter来获取参数:group。

以下是withRouter的文档：https://reacttraining.com/react-router/web/api/withRouter

此外，这是另一个可以帮助您的问题： React - How to get parameter value from query string

Answer 2

通常location.state与history.push一起使用。使用渲染组件时，也可以在其中发送子代。

const [ groups, setGroups ] = useState([])

    useEffect( () => {
        const result = () => {
            fetch("http://localhost:5000/groups", {method: "GET"})
                .then(response => response.json())
                .then(data => setGroups(data.groups))
                .catch(err => {
                    console.error(err)
                })
            }
            result()
    }, [])

    return (
       <Route 
           exact 
           path={`/groups/:group`} 
       >
       <GroupDetails 
           // pass whatever prop
          />
      </Route>
    )

在GroupDetails组件中，可以使用react-router提供的钩子。他们可能会给您您想要的东西。

const GroupDetails = ({routeProps, userId }) => {
    const history = useHistory()
    const {url, path} = useRouteMatch()
    const location = useLocation()
    const parameters = useParams() // :group will be found here
    const [ details, setDetails ] = useState(routeProps.location.state)

如果我还不了解您的问题，或者这不能解决您的问题，请告诉我。

在router.js中使用路由器道具来响应路由器

2 个答案: