SolidJS•8mo ago

Router isn't working.

Why routing is not working when i'm following exactly what doc says. Doc: https://docs.solidjs.com/solid-router/getting-started/defining-routes

Home.tsx:
export default () => {
    return (
        <h1>Hello World</h1>
    )
}

index.tsx:
import {render} from "solid-js/web";
import {Route, Router} from "@solidjs/router";
import Home from "./HelloWorld";

render(() => (
        <Router>
            <Route path="/home" component={Home}/>
        </Router>
    ), document.getElementById("app")
);

Home.tsx:
export default () => {
    return (
        <h1>Hello World</h1>
    )
}

index.tsx:
import {render} from "solid-js/web";
import {Route, Router} from "@solidjs/router";
import Home from "./HelloWorld";

render(() => (
        <Router>
            <Route path="/home" component={Home}/>
        </Router>
    ), document.getElementById("app")
);

I'm getting the following error: 'index.tsx:5 Unrecognized value. Skipped inserting'

17 Replies

kaxa•8mo ago

You're importing Home from "./HelloWorld" But your Home file is Home.tsx as shown in the snippet Try

import {render} from "solid-js/web";
import {Route, Router} from "@solidjs/router";
import Home from "./Home"; // if Home.tsx is in same directory as index

render(() => (
        <Router>
            <Route path="/home" component={Home}/>
        </Router>
    ), document.getElementById("app")
);

import {render} from "solid-js/web";
import {Route, Router} from "@solidjs/router";
import Home from "./Home"; // if Home.tsx is in same directory as index

render(() => (
        <Router>
            <Route path="/home" component={Home}/>
        </Router>
    ), document.getElementById("app")
);

mrViniciusOP•8mo ago

Nah, i just wrote it wrong on discord, the files imports are correct. for example, this does not work.

render(() => (
    // <Home/>
    <Router>
        <Route path={"/"} component={Home}></Route>
    </Router>
    ), document.getElementById("app")
);

render(() => (
    // <Home/>
    <Router>
        <Route path={"/"} component={Home}></Route>
    </Router>
    ), document.getElementById("app")
);

this does work.

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

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

kaxa•8mo ago

Oh maybe because You have Route written like this

<Route path={"/"} component={Home}></Route>

<Route path={"/"} component={Home}></Route>

instead of

<Route path={"/"} component={Home} />

<Route path={"/"} component={Home} />

But not sure, It should work Can you attach it to root Component and then render it that way?

const Root= (props) => (
    <>
       {props.children}
    </>
);

render(() => (
    // <Home/>
    <Router root={Root}>
        <Route path={"/"} component={Home} />
    </Router>
    ), document.getElementById("app")
);

const Root= (props) => (
    <>
       {props.children}
    </>
);

render(() => (
    // <Home/>
    <Router root={Root}>
        <Route path={"/"} component={Home} />
    </Router>
    ), document.getElementById("app")
);

mrViniciusOP•8mo ago

yeah it should work, that's what is bothering me, it's a new project, i used the minimal template from 'solidjs/templates', added @solid/router, and that's it. not, did not work.

mrViniciusOP•8mo ago

kaxa•8mo ago

The error was on which line exactly? Based on the screenshot

mrViniciusOP•8mo ago

line 12, the render function

kaxa•8mo ago

Ok in the index.html Is the Element with the id of "root" or "app"

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
    <title>Solid App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <script src="/src/index.tsx" type="module"></script>
  </body>
</html>

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
    <title>Solid App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <script src="/src/index.tsx" type="module"></script>
  </body>
</html>

This is mine and the div has id of root and you need to target the index.tsx in html file

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <script src="/src/index.tsx" type="module"></script>
  </body>

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

    <script src="/src/index.tsx" type="module"></script>
  </body>

mrViniciusOP•8mo ago

i changed to app, but i dont think this is the problem, because if i pass the component directly, it does load, but it doesnt if i pass the router

kaxa•8mo ago

Oh yeah thats true... Hmm, looking at your project I don't see any node modules The app shouldn't be running without node modules so you might have it installed but just incase in the terminal type

npm install

npm install

In /web directory

mrViniciusOP•8mo ago

IDE automatically hides node_modules

mrViniciusOP•8mo ago

i made it work using config, however what i truly want is do this using jsx syntax only.

mrViniciusOP•8mo ago

Component is not being recognized. Docs are pretty straight forward, (https://docs.solidjs.com/guides/routing-and-navigation), i can't grasp what is being done wrong here.

REEEEE•8mo ago

What does your home component look like

mrViniciusOP•8mo ago

here, it's just a hello world

REEEEE•8mo ago

Could be because it doesn't have a name

☼𝕯𝖆𝖞𝖑𝖎𝖌𝖍𝖙☾•8mo ago

note css is not imported in index.js

Gaming

Programming

Router isn't working.