Anchor doesn't load the page

The anchor tag doesn't seem to want to load the page for me. I have a core router in the index.jsx file

render(
  () => (
    <Router>
      <Route path="*" component={RootRouter} />
    </Router>
  ),
  app
);

render(
  () => (
    <Router>
      <Route path="*" component={RootRouter} />
    </Router>
  ),
  app
);

This is how my root router looks

function NotFound() {
    return (
        <h1>404</h1>
    );
}

export default function RootRouter() {
    return (
        <Router>
            <Route path="/" component={Home} />
            <Route path="/dashboard" component={Dashboard} />
            <Route path="/dashboard/*" component={Dashboard} />
            <Route path="*404" component={NotFound} />
        </Router>
    );
}

function NotFound() {
    return (
        <h1>404</h1>
    );
}

export default function RootRouter() {
    return (
        <Router>
            <Route path="/" component={Home} />
            <Route path="/dashboard" component={Dashboard} />
            <Route path="/dashboard/*" component={Dashboard} />
            <Route path="*404" component={NotFound} />
        </Router>
    );
}

and this is the dashboard

export default function Dashboard() {
    return (
        <div>
            <Sidebar></Sidebar>
            <Navbar></Navbar>

            <Router>
                <Route path="/dashboard/test1" component={partialRouterTest1} />
                <Route path="/dashboard/test2" component={partialRouterTest2} />
                <Route path="*" component={fallback} />
            </Router>
        </div>
    );
}

export default function Dashboard() {
    return (
        <div>
            <Sidebar></Sidebar>
            <Navbar></Navbar>

            <Router>
                <Route path="/dashboard/test1" component={partialRouterTest1} />
                <Route path="/dashboard/test2" component={partialRouterTest2} />
                <Route path="*" component={fallback} />
            </Router>
        </div>
    );
}

I have a navbar that has links to /dashboard/test1 and 2 and 3 for the fallback the anchor tags work as it it changes the url but the content doesn't seem to update also another question: is this a good way to use routers as i used express routers with ejs before this for years and i could just do

/*, router
/dashboard, router
/test1
/test2

/*, router
/dashboard, router
/test1
/test2

12 Replies

Brendonovich•9mo ago

couple of things wrong here 1. you've got routers within routers which is most likely not what you want 2. you're putting a router and routes in the Dashboard component when you more likely just want it to be a layout component with nested routes scrap the top level router and just use RootRouter, and read up on how to do nested routes and layout components: https://github.com/solidjs/solid-router?tab=readme-ov-file#nested-routes

AilaOP•9mo ago

got it but do i need to define all my routes in the same page?

Brendonovich•9mo ago

I mean there's not really any 'page' that you define routes in - the only requirement is that both <Route> and <Router> only contain <Route> as children

AilaOP•9mo ago

i meant the same .jsx file but doesn't that imply that i cannot use sub routers

import { Router, Route, A } from "@solidjs/router";

function DashboardCore() {
  return (
    <div>
      <h1>Dashboard</h1>
      <A href="/">Go to Home</A>
      <br></br>
      <A href="/dashboard/test1">Go to Dashboard Test 1</A>
    </div>
  );
}

function DashboardTest1() {
  return (
    <div>
      <h1>Dashboard Test 1</h1>
      <A href="/">Go to Home</A>
      <br></br>
      <A href="/dashboard">Go to Dashboard</A>
    </div>
  );
}

function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <A href="/dashboard">Go to Dashboard</A>
      <br></br>
      <A href="/dashboard/test1">Go to Dashboard Test 1</A>
    </div>
  );
}

export default function App() {
  return (
    <>
      <Router>
        <Route path="/" component={HomePage} />
        <Route path="/dashboard">
          <Route path="/" component={DashboardCore} />
          <Route path="/test1" component={DashboardTest1} />
        </Route>
      </Router>
    </>
  );
}

import { Router, Route, A } from "@solidjs/router";

function DashboardCore() {
  return (
    <div>
      <h1>Dashboard</h1>
      <A href="/">Go to Home</A>
      <br></br>
      <A href="/dashboard/test1">Go to Dashboard Test 1</A>
    </div>
  );
}

function DashboardTest1() {
  return (
    <div>
      <h1>Dashboard Test 1</h1>
      <A href="/">Go to Home</A>
      <br></br>
      <A href="/dashboard">Go to Dashboard</A>
    </div>
  );
}

function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <A href="/dashboard">Go to Dashboard</A>
      <br></br>
      <A href="/dashboard/test1">Go to Dashboard Test 1</A>
    </div>
  );
}

export default function App() {
  return (
    <>
      <Router>
        <Route path="/" component={HomePage} />
        <Route path="/dashboard">
          <Route path="/" component={DashboardCore} />
          <Route path="/test1" component={DashboardTest1} />
        </Route>
      </Router>
    </>
  );
}

this works as expected but i was looking for something like

import { Router, Route, A } from "@solidjs/router";
import DashboardRouter from "./pages/dashboard";

function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <A href="/dashboard">Go to Dashboard</A>
      <br></br>
      <A href="/dashboard/test1">Go to Dashboard Test 1</A>
    </div>
  );
}

export default function App() {
  return (
    <>
      <Router>
        <Route path="/" component={HomePage} />
        <Route path="/dashboard" component={DashboardRouter} />
      </Router>
    </>
  );
}

import { Router, Route, A } from "@solidjs/router";
import DashboardRouter from "./pages/dashboard";

function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <A href="/dashboard">Go to Dashboard</A>
      <br></br>
      <A href="/dashboard/test1">Go to Dashboard Test 1</A>
    </div>
  );
}

export default function App() {
  return (
    <>
      <Router>
        <Route path="/" component={HomePage} />
        <Route path="/dashboard" component={DashboardRouter} />
      </Router>
    </>
  );
}

import { Router, Route, A } from "@solidjs/router";

function DashboardCore() {
    return (
        <div>
            <h1>Dashboard</h1>
            <A href="/">Go to Home</A>
            <br></br>
            <A href="/dashboard/test1">Go to Dashboard Test 1</A>
        </div>
    );
}

function DashboardTest1() {
    return (
        <div>
            <h1>Dashboard Test 1</h1>
            <A href="/">Go to Home</A>
            <br></br>
            <A href="/dashboard">Go to Dashboard</A>
        </div>
    );
}

export default function DashboardRouter() {
    console.log("DashboardRouter");
    return (
        <Router>
            <Route path="/" component={DashboardCore} />
            <Route path="/test1" component={DashboardTest1} />
        </Router>
    );
}

import { Router, Route, A } from "@solidjs/router";

function DashboardCore() {
    return (
        <div>
            <h1>Dashboard</h1>
            <A href="/">Go to Home</A>
            <br></br>
            <A href="/dashboard/test1">Go to Dashboard Test 1</A>
        </div>
    );
}

function DashboardTest1() {
    return (
        <div>
            <h1>Dashboard Test 1</h1>
            <A href="/">Go to Home</A>
            <br></br>
            <A href="/dashboard">Go to Dashboard</A>
        </div>
    );
}

export default function DashboardRouter() {
    console.log("DashboardRouter");
    return (
        <Router>
            <Route path="/" component={DashboardCore} />
            <Route path="/test1" component={DashboardTest1} />
        </Router>
    );
}