S
SolidJS•4mo ago
Mercy

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
Brendonovich•4mo 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
Mercy
Mercy•4mo ago
got it but do i need to define all my routes in the same page?
Brendonovich
Brendonovich•4mo 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
Mercy
Mercy•4mo 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>
    );
}
Brendonovich
Brendonovich•4mo ago
since they're just jsx you can split them into separate components and the different components can go in different files
Mercy
Mercy•4mo ago
ah
Brendonovich
Brendonovich•4mo ago
they just need to be assembled into one big route tree
Mercy
Mercy•4mo ago
got it thanks
Brendonovich
Brendonovich•4mo ago
use DashboardRouter as a child of the dashboard route and remove the <Router> you most likely aren't looking for nested routers
Mercy
Mercy•4mo ago
yeah i figured it out
Mercy
Mercy•4mo ago
it just clicked when you said this
No description
Mercy
Mercy•4mo ago
thanks 🥰
Want results from more Discord servers?
Add your server
More Posts
Scope styles to a pageHeyo! I want to be able to scope some CSS to only apply when that page component is mounted. This CSI use set timeout everywhere for animation and state is that ok?yesCode review request: Optional context Provider patternI'm trying to find a context pattern that works with/without having to wrap context Provider in app How to disable ssr in solidstart?i wanna disable ssrImport error with OutletThis is the code I apply to my routes to protect them from users who are not logged in, and I get thCreate signal from store elementI have a component that takes signal as a prop: ```ts const NumberInput:Component<{value:Signal<numbHow to react to length of store array?I have a store representing an array: ```ts const [pools, setPools] = createStore<Pool[]>([]) ``` ElSolidJS with Router behind Apache ProxyI had initially written my app without a Router and it was working fine running behind an apache proError in NSwag generated api clientAnyone experienced the problem " Unexpected reserved word 'let'." when building your solid-start appHandling errors in createResourceMy `createResource` handle fetches data from a REST API and is displayed on the screen. I have inte