SolidJS•12mo ago

Solidjs navbar and router setup problem

Can anyone help, my Index.jsx is as under: import { render } from "solid-js/web"; import { Router } from "@solidjs/router"; import "./index.css"; import App from "./App"; const root = document.getElementById("root"); render( () => <Router root={App} />, root ); App.js is as under: import { Route, Router } from "@solidjs/router"; import Nav from "./Components/Nav.jsx"; import Home from "./Pages/Home"; import SavedRepos from "./Pages/SavedRepos.jsx"; function App () { return ( <div class="container"> <Nav /> <Route> <Route path="/" component={ Home } /> <Route path="/savedrepos" component = { SavedRepos } /> </Route> {/* <h1>App Component</h1> */} </div> ); } export default App; Nav.jsx is as under: import { A } from "@solidjs/router"; const Nav = () => { return ( <nav class="mt-5 mb-3">
<A href="/" class="btn btn-primary me-2" end activeClass="btn-success" > Home </A> <A href="/savedrepos" class="btn btn-primary me-2" activeClass="btn-success" > Saved Repos </A> </nav> ); }; export default Nav; The above code is not working, it shows navbar items only when "/" but when click "/seavedrepos" all blank even when "/" it does not show screen for Home just show navbar items.

3 Replies

Brendonovich•12mo ago

Your routes should be children of the router, not part of root. Your root should use props.children where the routes should be rendered.

Rajesh JoshiOP•12mo ago

It worked partially, now it showing content from Home.jsx but not from SavedRepos.jsx. When inspected on devtools, no content in body of SavedRepos.jsx.const Home = () => { return ( <div> <h2>Home</h2> </div> ) } export default Home; savedRepos.jsx const SavedRepos = () => { return ( <div> <h2>Saved Repos</h2> </div> ) } export default SavedRepos; content in both files is just text under h2 tag

Brendonovich•12mo ago

You should have this. Also format your code inside ```

// index
import { render } from "solid-js/web";
import { Router } from "@solidjs/router";
import "./index.css";
import App from "./App";

import Home from "./Pages/Home";
import SavedRepos from "./Pages/SavedRepos";

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

render(
  () => (
    <Router root={App}>
      <Route path="/" component={Home} />
      <Route path="/savedrepos" component={SavedRepos} />
    </Router>
  )
  root
);

// App
import { Route, Router } from "@solidjs/router";
import Nav from "./Components/Nav";

function App(props) {
  return (
    <div class="container">
      <Nav />
      {props.children}

      {/* <h1>App Component</h1> */}
    </div>
  );
}

// index
import { render } from "solid-js/web";
import { Router } from "@solidjs/router";
import "./index.css";
import App from "./App";

import Home from "./Pages/Home";
import SavedRepos from "./Pages/SavedRepos";

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

render(
  () => (
    <Router root={App}>
      <Route path="/" component={Home} />
      <Route path="/savedrepos" component={SavedRepos} />
    </Router>
  )
  root
);

// App
import { Route, Router } from "@solidjs/router";
import Nav from "./Components/Nav";

function App(props) {
  return (
    <div class="container">
      <Nav />
      {props.children}

      {/* <h1>App Component</h1> */}
    </div>
  );
}

Gaming

Programming

Solidjs navbar and router setup problem