Как запомнить ссылку React router

у меня сайт, где я использую react-router-DOM V6. Я столкнулся с такой проблемой, если открыть сайт и переходить по ссылкам по-порядку,то есть переход только по кнопкам, то все хорошо работает, но вот если я хочу открыть в браузере ссылку, которая переходит на другую страницу(не стартовую), то ссылка не открывается(так как не найдена). В целом я понимаю, почему так происходит, так как react-router не понимает новой ссылки, так не был прорисован предыдущий компонент. Так вот как мне сделать так, чтобы я сразу мог ввести ссылку с переходом на другой компонент, не загружая сайт по-порядку?

App.js

import {Route, Routes, Navigate} from "react-router-dom";
import WhatToWearPage from "./Pages/projects/WhatToWear";
import WhatToWearTermsPage from "./Pages/projects/WhatToWearTerms";

import Layout from "./Components/Layout";

function App() {
    return (
        <div className="App">
            <Routes>
                <Route path="/" element={<Layout />}>
                    <Route path="whattowear" element={<WhatToWearPage/>}/>
                    <Route path="whattowear-terms" element={<WhatToWearTermsPage/>}/>
                    <Route path="whattowear-terms" element={<Navigate to="/whattowear-terms" replace />}/>
                    <Route path="*" element={<NotFoundPage/>}/>
                </Route>
            </Routes>
        </div>

    );
}

export default App;

Компонент, который хочу открыть сразу

import {Link} from "react-router-dom";

function WhatToWear() {
    return (
        <div>
            <div className="termsWtw">
                <Link to="/whattowear-terms">Политика конфиденциальности</Link>
            </div>
        </div>
    )
}

export default WhatToWear