Страница React не загружает новый контент

Я пытаюсь перенаправить страницу декларативно.

Вот мой Header.js:

const Header = () => {  
    const [data, setData] = useState({ objects: [] });
    useEffect(async () => {
        const result = await axios.get(
            "http://example.com/api/v1/categories"
        );
        setData(result.data);
    }, []);

    return (
        <div>
            {courses.map( objects => (
                <Link to={`/cats/${objects.id}`}>{objects.title}</Link>
            ))}
        </div>
    );
};

export default Header;

Вот мой App.js

class App extends Component {
    render(){
        return (
            <Router>
                <Redirect exact from="/" to="/index" />
                <Route path = "/" component = {App}>
                    <Header/>
                    <Route path="/cats/:objectId" component={CoursePage} />
                </Route>
            </Router>
        );
    }
}
export default App;

Вот CoursePage.js:

const CoursesPage = (props) => {

    let { objectId } = useParams();


    const [data, setData] = useState({ courses: [] });

    useEffect(() => {
        (async () => {
            const result = await axios.get(
                "http://example.com/api/v1/cats/"+objectId
            ).catch(err => {
                console.error(err);
            });
            setData(result.data);
        })();
    }, []);


    return (
        <Fragment>
            {courses.title}
        </Fragment>
    );
};

export default CoursesPage;

В заголовке я нажимаю на ссылки. Он успешно перенаправляет на страницу курса. Но когда я снова нажимаю ссылку на другой курс, он не перезагружает компонент и не загружает новые данные. URL меняется, а страница нет.

Как я могу заставить страницу перезагрузить компонент?