S
SolidJS•8mo 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•8mo 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
ZedOP•8mo 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•8mo 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
ZedOP•8mo 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•8mo 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
ZedOP•8mo 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•8mo ago
I remember having done that and it worked but it's not the pattern that everyone follows.
Zed
ZedOP•8mo ago
well then maybe I will not ig....
peerreynders
peerreynders•8mo ago
root is the wrapper (layout) that will be used around every Route component.
Zed
ZedOP•8mo ago
hmm k thanks problem solved closing post
Want results from more Discord servers?
Add your server