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.
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.
