S
SolidJS•7mo ago
Carrot Rübe

SolidJS routing not working, needs to reload the page.

Whenever I try to go to another page I have to reload the page. I use Tauri, SolidJS and vite. sidebar.jsx 
           <nav>
                <li id="link-library">

                    <nav>
                    <A href="/my-library" activeClass="underlined" inactiveClass="default">
                        <p className="links-texts">My Library</p>
                    </A>
                    </nav>

                </li>
            </nav>
           <nav>
                <li id="link-library">

                    <nav>
                    <A href="/my-library" activeClass="underlined" inactiveClass="default">
                        <p className="links-texts">My Library</p>
                    </A>
                    </nav>

                </li>
            </nav>
App.jsx 
    const sidebarRoutes = [
        {
            path: "/",
            component: lazy(() => import("./templates/gamehub-01/Gamehub")),
        }, 
        {
            path: "/my-library",
            component: lazy(() => import("./templates/mylibrary-01/Mylibrary"))
        }
    ]

  return (
            <div className="app-container">
                <div className="main-content">
                    <div className="searchbar">
                        <Searchbar />
                    </div>
                    <Router>
                        {sidebarRoutes}
                    </Router>
                </div>
            </div>
)
    const sidebarRoutes = [
        {
            path: "/",
            component: lazy(() => import("./templates/gamehub-01/Gamehub")),
        }, 
        {
            path: "/my-library",
            component: lazy(() => import("./templates/mylibrary-01/Mylibrary"))
        }
    ]

  return (
            <div className="app-container">
                <div className="main-content">
                    <div className="searchbar">
                        <Searchbar />
                    </div>
                    <Router>
                        {sidebarRoutes}
                    </Router>
                </div>
            </div>
)
index.js 
render(() => ( 
    <Router root={App}></Router>
    ), document.getElementById("root"));
render(() => ( 
    <Router root={App}></Router>
    ), document.getElementById("root"));
2 Replies
Brendonovich
Brendonovich•7mo ago
Your app should only have one Router, which should only have the route config as children. 
// App.jsx

const sidebarRoutes = [
  {
    path: "/",
    component: lazy(() => import("./templates/gamehub-01/Gamehub")),
  }, 
  {
    path: "/my-library",
    component: lazy(() => import("./templates/mylibrary-01/Mylibrary"))
  }
]

export function App() {
  return (
    <Router root={props => (
      <div className="app-container">
        <div className="main-content">
          <div className="searchbar">
            <Searchbar />
          </div>
          {props.children}
        </div>
      </div>
    )}>
      {sidebarRoutes}
    </Router>
  )
}

// index.js
render(() => <App />, document.getElementById("root"));
// App.jsx

const sidebarRoutes = [
  {
    path: "/",
    component: lazy(() => import("./templates/gamehub-01/Gamehub")),
  }, 
  {
    path: "/my-library",
    component: lazy(() => import("./templates/mylibrary-01/Mylibrary"))
  }
]

export function App() {
  return (
    <Router root={props => (
      <div className="app-container">
        <div className="main-content">
          <div className="searchbar">
            <Searchbar />
          </div>
          {props.children}
        </div>
      </div>
    )}>
      {sidebarRoutes}
    </Router>
  )
}

// index.js
render(() => <App />, document.getElementById("root"));
Carrot Rübe
Carrot RübeOP•7mo ago
Thank you, this fixed everything :) Thxxxxxxxxxxxxx <3

Did you find this page helpful?