useLocation: хуки могут вызываться только внутри тела компонента функции - PullRequest
Новая
       3

useLocation: хуки могут вызываться только внутри тела компонента функции

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

Я пытаюсь использовать хук useLocation в своем функциональном компоненте, но получаю Error: Invalid hook call. Hooks can only be called inside of the body of a function component..

Мое приложение структурировано так: 

import React, {useEffect, useState} from "react";
import Navigation from "./components/Navigation";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
    // ...
    return (
        <Router>
            <div>
                // ...
                <Navigation themes={themes} />
                // ...
                <Switch>
                    <Route path="/mytheme">
                        <MyTheme />
                    </Route>
                </Switch>
            </div>
        </Router>
    );
}

export default App;

С компонент Navigation (см. выше) выглядит следующим образом: 

import React from "react";
import { Link, useLocation } from "react-router-dom";

function Navigation(props) {
    const location = useLocation(); // ---> this is the problem
    return (
        <div>
            {
                props.themes.map((theme, index) => {
                    return <Link key={index} to={"/" + theme.id}>
                        { theme.name }
                    </Link>
                })
            }
        </div>
    );
}

export default Navigation;

Навигация работает нормально, но я хочу использовать useLocation в компоненте Navigation, чтобы выделить активную "страницу".

...