CODEWITHSUNDEEP
javascriptroutessolid-js
Codebro24
Codebro24

Reputation: 1

How to use multiple routes in solidjs router

I was making this app in solid-js and my code goes like:

import type { Component } from 'solid-js';
import { lazy } from 'solid-js';
import  './App.module.css';
import { Routes, Route } from '@solidjs/router';
import Home from './pages/Home';
import BlogPage from './pages/blogPage';

const App: Component = () => {
  return (
   <>
    <Routes>
     <Route path='/' component={Home} />
     <Route path='/blogpage' component={BlogPage} />
    </Routes>
  </>
 );
};

export default App;

even after changing component to element, and writing it as

<Route path='/' element={<Home />} />
<Route path='/blogpage' element={<BlogPage />} />

I also tried the lazy method but it didn't work. The output it shows is only for Home Component. Even after searching, there isn't any explanation for this in the documents.

Upvotes: 0

Views: 1560

Answers (1)

snnsnn
snnsnn

Reputation: 13698

Few issues with your application. First and foremost, you need to wrap your application in a Router component.

We need links to navigate to the specified directories so to check if they are working correctly.

import type { Component } from "solid-js";
import { render } from "solid-js/web";
import { Routes, Route, Router, Link } from "@solidjs/router";

const Home = () => {
  return <div>Home</div>;
};

const Blog = () => {
  return <div>Blog</div>;
};

const App: Component = () => {
  return (
    <Router>
      <ul>
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/blog">Blog</Link>
        </li>
      </ul>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/blog" component={Blog} />
      </Routes>
    </Router>
  );
};

render(() => <App />, document.getElementById("app"));

Here is a working demo at https://codesandbox.io/s/solid-counter-forked-f1bfk2

You can check solid router documentation at https://github.com/solidjs/solid-router.

Upvotes: 0

Related Questions