Как получить путь к местоположению с помощью React Router v5 и хуков в React v16.13.1? - PullRequest
Новая
       40

Как получить путь к местоположению с помощью React Router v5 и хуков в React v16.13.1?

1 голос
/ 20 марта 2020

У меня есть проблема с React Router useLocation и как получить текущий путь.

Вот что я делаю: 

    import {BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
    import {useHistory, useLocation} from 'react-router-dom'

    function Home(props) {
        const [isHome, setIsHome] = useState(true);
        const [isContents, setIsContents] = useState(false);
        const [isUserProfile, setIsUserProfile] = useState(false);
        let location = useLocation();
        let history = useHistory();

        console.log(location)
        console.log(history)

        function getCurrentLocation() {

        }

        function logout() {
            const logger = fetch('/users/logout');
            logger.then(logout => {
                if (logout.ok) {
                    props.logout()
                } else {
                    console.log('error', logout);
                }
            })
        }


        return (
            <Router>
                <div className={'container-fluid h-100'}>
                    <div className={'row'}>
                        <ul className={"nav nav-tabs"}>
                            <li className={"nav-item"}>
                                <Link to={'/home'}>1</Link>
                            </li>
                            <li className={"nav-item"}>
                                <Link to={'/contents'}>2</Link>
                            </li>
                            <li className={"nav-item"}>
                                <Link to={'/user'}>3</Link>
                            </li>
                        </ul>
                    </div>
                    <Switch>
                        <Route exact path={'/home'}>1</Route>
                        <Route path={'/contents'}>2</Route>
                        <Route path={'/user'}>3</Route>
                    </Switch>
                </div>
            </Router>
        )
    };

    export default Home

Я хочу получить currentLocationPathName для того, чтобы применить какой-то собственный стиль. Когда я делаю console.log(location), я получаю следующее: 

function useLocation() {
 if (true) {
    !(typeof useContext === "function") ?  true ? Object(tiny_invariant__WEBPACK_IMPORTED_MODULE_6__["default"])(false, "You must use React >= 16.8 in order to use useLocation()") : undefined : void 0;
  }

  return useContext(context).location;
}

Вот снимок экрана для получения дополнительной информации:

сообщение об ошибке

Я хочу лучше понять, как использовать эти крючки.

Спасибо за ваше время.

Редактировать:

Спасибо @ Dance2d ie за его ответ и особенно эта рекомендация:

А также убедитесь, что Home используется под деревом маршрутизатора (например, BrowserRouter) (child, внук и т. д. c)

I не поставил Home под <Router></Router> дерево ...

Теперь все работает хорошо, и я могу получить доступ к location.pathname.

1 Ответ

0 голосов
/ 20 марта 2020

useHistory и useLocation являются функциями, поэтому вам необходимо вызывать их.

Вместо 

let location = useLocation;
let history = useHistory

Вызывать функции перехвата. 

                          ?
let location = useLocation()
                        ?
let history = useHistory()

А также убедитесь, что Home используется под деревом маршрутизатора (например, BrowserRouter) (дочерний, внучатый и т. Д. c)

Старый ответ перед редактированием ОП .

В версии 16.8.0 были добавлены крючки.
https://github.com/facebook/react/blob/master/CHANGELOG.md#react -2

Таким образом, в сообщении говорится, что вы не можете использовать useLocation с вашей версией React, v16.3.1.

Чтобы исправить эту проблему, вам нужно обновить React до версии не ниже 16.8.0 (желательно до самой последней, чтобы подготовиться к выходу React Router v6 с надеждой на раннее обновление). или в середине этого года).

...