React Router blank page between two different projects

[madsongr]

I have built the first project and I can navigate among its pages without problems. So I built another project and hosted it on a sub directory and when I try to navigate between the first project and the second one, I get a blank page. I have to refresh the page to make it work.

Is there a fix for this issue or do I have to attach the second project to the first one?

I also tried to remove the custom wrapper but it didn't work anyway.

I'm using react-router-dom 6.4.0.

First project router:

import { useLayoutEffect } from "react";
import { BrowserRouter as Router, Route, Routes, useLocation } from "react-router-dom";

import { Home } from "./pages";
import { TravelDetails } from "./pages/TravelDetails";
import { Travels } from "./pages/Travels";

export function AppRoutes() {

    const Wrapper = ({ children }: any) => {

        const location = useLocation();

        useLayoutEffect(() => {

            document.documentElement.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
        }, [location.pathname]);

        return children;
    }

    return (
        <Router>
            <Wrapper>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/trips" element={<Travels />} />
                    <Route path="/trip-details/:id" element={<TravelDetails />} />
                </Routes>
            </Wrapper>
        </Router>
    )
}

Second project router:

import { useLayoutEffect } from "react";
import { BrowserRouter as Router, Route, Routes, Navigate, Outlet, useLocation } from "react-router-dom";

import { Home } from "./pages";
import { TravelDetails } from "./pages/TravelDetails";
import { Register } from "./pages/Register";
import { Travels } from "./pages/Travels";
import { Profile } from "./pages/Profile";
import { Terms } from "./pages/Terms";
import { IsAuthenticated } from "./auth";

export function AppRoutes() {

    const PrivateRoute = () => {

        return IsAuthenticated() ? <Outlet /> : <Navigate to="/dashboard" />;
    }

    const Wrapper = ({ children }: any) => {

        const location = useLocation();

        useLayoutEffect(() => {

            document.documentElement.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
        }, [location.pathname]);

        return children;
    }

    return (
        <Router>
            <Wrapper>
                <Routes>
                    <Route path="/dashboard" element={<Home />} />
                    <Route path="/dashboard/register" element={<Register />} />

                    <Route path="/" element={<PrivateRoute />}>
                        <Route path="/dashboard/home" element={<Travels />} />
                        <Route path="/dashboard/trip-details/:id" element={<TravelDetails />} />
                        <Route path="/dashboard/account" element={<Profile />} />
                    </Route>
                </Routes>
            </Wrapper>
        </Router>
    )
}

Firts project package.json:

{
  "name": "website",
  "homepage": "https://mywebsite.com/",
  "private": true,
  "version": "0.0.0",
  "type": "module",
...

Second project package.json:

{
  "name": "dashboard",
  "homepage": "https://mywebsite.com/dashboard",
  "private": true,
  "version": "0.0.0",
  "type": "module",
...

This is the way I try to navigate from the first one to the second one:

    const createAccount = () => {
        navigate("/dashboard/register");
    }

[brophdawg11]

You can't route between 2 separate apps via navigate, that is for navigating to routes within the current application. So you're getting a 404 blank page because the current app doesn't know about the /dashboard routes. Instead, if you need to navigate to an external route and perform a full document reload, you should navigate using window.location.

[madsongr]

Yes I did it. Thanks!