S
SolidJS•3mo ago
Zed

Solidjs route not working...

I am getting an error which you can see in the image and I can't see the content which I put in there. I am using Solidjs 1.8.11 with @solidjs/router 0.13.2 and JS My code - Index.jsx - 
import { render } from "solid-js/web";
import { Router } from "@solidjs/router";
import App from "./App";
import "./index.css";

const root = document.getElementById("root");

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?"
  );
}

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  root
);
import { render } from "solid-js/web";
import { Router } from "@solidjs/router";
import App from "./App";
import "./index.css";

const root = document.getElementById("root");

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?"
  );
}

render(
  () => (
    <Router>
      <App />
    </Router>
  ),
  root
);
App.jsx - 
import { Routes, Route } from "@solidjs/router";
import Home from "./pages/home";
import About from "./pages/about";

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Routes>
    </div>
  );
}

export default App;
import { Routes, Route } from "@solidjs/router";
import Home from "./pages/home";
import About from "./pages/about";

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </Routes>
    </div>
  );
}

export default App;
home.jsx - 
export default function Home(){
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}
export default function Home(){
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}
home.jsx is in ./src/pages while App.jsx & index.jsx are in ./src
No description
10 Replies
Brendonovich
Brendonovich•3mo ago
Routes doesn't exist in solid router, check the docs for the new way to do routing
GitHub
GitHub - solidjs/solid-router: A universal router for Solid inspire...
A universal router for Solid inspired by Ember and React Router - solidjs/solid-router
Zed
Zed•3mo ago
ohh ok lemme check So i changed the routes to router but I have a bit problem in index.jsx I dont know much abt solid so dunno how to do it index.jsx - 
import { render } from "solid-js/web";
import { Router } from "@solidjs/router";
import App from "./App";
import "./index.css";

const root = document.getElementById("root");

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?"
  );
}

// What I have
render(() => <App />, root);
// what documentation says
render(() => <Router />, root);
import { render } from "solid-js/web";
import { Router } from "@solidjs/router";
import App from "./App";
import "./index.css";

const root = document.getElementById("root");

if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
  throw new Error(
    "Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?"
  );
}

// What I have
render(() => <App />, root);
// what documentation says
render(() => <Router />, root);
see the last 4 lines i my original code I had <App /> the documetaion wants to add <Router /> there what should I do
Brendonovich
Brendonovich•3mo ago
you can put whatever you want in index, as long as your router is somewhere in your app then the router should have all its routes as children
Zed
Zed•3mo ago
umm ok lemme try I found this code for the routers and route, should I put it in the App.jsx or index.jsx? 
import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";

import Home from "./pages/Home";
import Users from "./pages/Users";

render(() => (
  <Router>
    <Route path="/users" component={Users} />
    <Route path="/" component={Home} />
  </Router>
), document.getElementById("app"));
import { render } from "solid-js/web";
import { Router, Route } from "@solidjs/router";

import Home from "./pages/Home";
import Users from "./pages/Users";

render(() => (
  <Router>
    <Route path="/users" component={Users} />
    <Route path="/" component={Home} />
  </Router>
), document.getElementById("app"));
it worked I did something now I wanna ask something for the last time in App.jsx - 
import { Route, Router } from "@solidjs/router";
import Home from "./pages/home";
import About from "./pages/about";
import not from "./pages/notFound";
import { render } from "solid-js/web";
const root = document.getElementById("root");

function App() {
  return (
    <div>
      <Router>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="*404" component={not} />
      </Router>
    </div>
  );
}

render(
  () => (
    <Router root={App}>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="*404" component={not} />
    </Router>
  ),
  root
);

export default App;
import { Route, Router } from "@solidjs/router";
import Home from "./pages/home";
import About from "./pages/about";
import not from "./pages/notFound";
import { render } from "solid-js/web";
const root = document.getElementById("root");

function App() {
  return (
    <div>
      <Router>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="*404" component={not} />
      </Router>
    </div>
  );
}

render(
  () => (
    <Router root={App}>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="*404" component={not} />
    </Router>
  ),
  root
);

export default App;
Do i need the function App cuz its not like its doing something here right? actually When I delete that code my website dosent work now what I have two same things in the website
peerreynders
peerreynders•3mo ago
- index.tsx renders App.tsx and pulls in the app with an import - App.tsx defines the app component and needs to export it - what you don't need is the render function in App.tsx Though that's just convention. If you put everything in index.tsx that should still work as well. Don't worry about my tsx vs jsx. jsx just means that you are responsible for tracking these kind of things yourself rather than having TypeScript yell at you all the time.
Zed
Zed•3mo ago
hmmm k I rewrite it and now it works App.jsx - 
import { Route, Router } from "@solidjs/router";
import Home from "./pages/home";
import About from "./pages/about";
import not from "./pages/notFound";
import { render } from "solid-js/web";
const root = document.getElementById("root");

function App() {
  return (
    <div>
      <Router>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="*404" component={not} />
      </Router>
    </div>
  );
}

render(() => <Router root={App} />, root);

export default App;
import { Route, Router } from "@solidjs/router";
import Home from "./pages/home";
import About from "./pages/about";
import not from "./pages/notFound";
import { render } from "solid-js/web";
const root = document.getElementById("root");

function App() {
  return (
    <div>
      <Router>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="*404" component={not} />
      </Router>
    </div>
  );
}

render(() => <Router root={App} />, root);

export default App;
thanks both of u it works perfectly fine You mean I can work with index.jsx only + components + pages and remove App.jsx? btw I dont understand this statement from the App.jsx, can someone explain this - 
render(() => <Router root={App} />, root);
render(() => <Router root={App} />, root);
peerreynders
peerreynders•3mo ago
I remember having done that and it worked but it's not the pattern that everyone follows.
Zed
Zed•3mo ago
well then maybe I will not ig....
peerreynders
peerreynders•3mo ago
root is the wrapper (layout) that will be used around every Route component.
Zed
Zed•3mo ago
hmm k thanks problem solved closing post
Want results from more Discord servers?
Add your server
More Posts
Getting the full domain/url server sideI have a multi tenant SaaS where clients CNAME their own domains to my app. I need to get the domainDoes Solid Router's APIs provide any way to abort a pending submission?My issue is that I want to do optimistic updates, but if the user decides to change things way too fNo Context when using hyper dom expressionsI've this strange behaviour that `useCounter(CounterContext)` returns `undefined` when porting the cHow do you do route transitions with SolidStart's <FileRoutes />?I can't seem to do it using `<FileRoutes />` but manually importing page components and declaring `<How to do CSR in SolidJs?1) How to do client-side-routing in solid with "typescipt"? 2) Is there any benefit using vite + solApp is misconfigured. Please correct sub_filter.Config file: root $dir_path; if ($deploy_path = "http://localhost:3000") { set $deploy_path "facing reactivity issuesTrying to use solid.js with Strap cms, while it works, I need to first refresh my browser before it The props are reactive, right?I've created a small wrapper around `solid-table`: ```ts export function DataTable<TData extends { iIs it possible for all requests and actions to share a server side (singleton) module in memory?In the process of updating my [Chat with SSE using SolidStart example](https://github.com/peerreyndeDelete key in storeHow do I delete a key in a store? My store is typed so I can't simply set the value to undefined. W