React Router, используя реквизиты роутера в роутере. js - PullRequest
Новая
       19

React Router, используя реквизиты роутера в роутере. js

0 голосов
/ 25 апреля 2020

Я пытаюсь передать состояние на следующий маршрут, используя ': group'. Это возможно?

Маршрутизатор. 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)

Прямо сейчас со страницы моей группы, если я нажму указанную группу c, она перейдет на страницу. Но если ввести «www.website.com/groups/groupname», это будет неопределенным, потому что нет ничего в routeProp.location.state.

Я думаю о том, чтобы просто установить состояние groupId в верхнем компоненте и выполнять setGroupId каждый раз, когда группа страница щелкается и передается в путь как /groups/${groupId}. Я мог видеть, как это работает, но мне интересно, могу ли я использовать React Router для этого.

Спасибо

Ответы [ 2 ]

0 голосов
/ 25 апреля 2020

Обычно location.state используется вместе с history.pu sh. Когда вы рендерите компонент с помощью, вы также можете отправлять дочерние элементы внутри. 

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 вы можете использовать хуки, предоставляемые реагирующим маршрутизатором. Они могут получить то, что вы хотите. 

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)

Пожалуйста, дайте мне знать, если я не понял вашего вопроса или это не решило вашу проблему.

0 голосов
/ 25 апреля 2020

Ну, вы можете использовать withRouter, чтобы получить параметр :group.

Вот документы для withRouter: https://reacttraining.com/react-router/web/api/withRouter

Также здесь еще один вопрос, который может вам помочь: Реагировать - Как получить значение параметра из строки запроса

...