2

I already searched a lot and could not find an answer. In my SolidJs app, the second route is not redered in root element:

import { Routes, Route, useLocation } from "solid-app-router"
import { useNavigate } from 'solid-app-router';

const Login = lazy(() => import("./pages/login"));
const Operation = lazy(() => import("./pages/operation"));

export default function App() {
  const navigate = useNavigate();
  const location = useLocation();
  onMount(() => {
    const token = localStorage.getItem('token');
    if (!token && location.pathname !== '/') {
      navigate("/", { replace: true });
    }
    if (token && location.pathname === '/') {
      navigate("/operations", { replace: true });
    }
  });
  return (
    <Routes>
      <Route path='/' component={Login} />
      <Route path='/operations' component={Operation} />
    </Routes>
  )
}

Everything looks OK at component Operation and if I call this component in first route like bellow it work:

<Route path='/' component={Operation} />
ggorlen
  • 44,755
  • 7
  • 76
  • 106
Richard Feliciano
  • 115
  • 1
  • 1
  • 9

2 Answers2

2

I struggled with this for a while and realised that the application needs to make reference to the Routes by means of an <A> tag.

If you look at this part of the docs, it mentions that these tags include an active class which seems to be used to tell the application to actually bundle this component on build time otherwise by default it is not included.

So if you put <A href="/operations">Operations</A> somewhere in your homepage like a Navbar, that page/component should bundle in on deployment.

By default though all routes in Routes in dev environment should work so if it is not working in dev environment I would just check that the module is being resolved correctly.

Cameron Wright
  • 21
  • 3
0

The root component should be wrapped in Router component.

snnsnn
  • 10,486
  • 4
  • 39
  • 44