Error while using useNavigate() or <Navigate />

PrivateRoute.tsx


import { Route, useNavigate } from '@solidjs/router'

import Index from '../pages'

const PrivateRoute = () => {
  const isLoggedIn = !!localStorage.getItem('token')
  const navigate = useNavigate()

  if (!isLoggedIn) {
    navigate('/', { replace: true })
  }

  return <Route path='/' component={Index} />
}

export default PrivateRoute

App.tsx


import { MetaProvider } from '@solidjs/meta'
import { Route, Router } from '@solidjs/router'
import { Component, lazy } from 'solid-js'

import PrivateRoute from './routes'

const Login = lazy(() => import('./pages/Login'))

const App: Component = () => {
  return (
    <MetaProvider>
      <Router>
        <Route children={<PrivateRoute />} />
        <Route path='/login' component={Login} />
      </Router>
    </MetaProvider>
  )
}

export default App

The error in browser is Uncaught Error: Make sure your app is wrapped in a <Router /> Any Solution

21 Replies

Anish Neupane•5mo ago

"@solidjs/meta": "^0.29.3", "@solidjs/router": "^0.10.5", "solid-js": "^1.8.8",

Alex Lohr•5mo ago

The children syntax here is strange. Also the route with children prop has no path.

Anish Neupane•5mo ago

change to this

const App: Component = () => {
  return (
    <AuthProvider>
      <MetaProvider>
        <Router>
          <Route path='/'>
            <PrivateRoute />
          </Route>
        </Router>
      </MetaProvider>
    </AuthProvider>
  )
}

but still same problem

Alex Lohr•5mo ago

What settings do you use? Bare solid-start?

Anish Neupane•5mo ago

It's not a solid start it's solid with vite By this cli npm create vite@latest my-app -- --template solid-ts

bigmistqke•5mo ago

1. update your solid to the latest version (just tried it out w the template and was on 1.7.6 and then it's missing a function the new router needs) 2. use the component-prop to inject it into the router, do not use children p.ex

import { Route, Router, useNavigate } from "@solidjs/router";

const PrivateRoute = () => {
  const isLoggedIn = !!localStorage.getItem('token')
  const navigate = useNavigate()

  if (!isLoggedIn) {
    navigate('/login', { replace: true })
  }
  return <>private route</>;
};

const Login = () => {
  const navigate = useNavigate()

  const login = () => {
    localStorage.setItem('token', "whatever")
    navigate('/', { replace: true })
  }

  return <button onClick={login}> 
    login
  </button>
};

export default () => (
  <Router>
    <Route path="/" component={PrivateRoute}/>
    <Route path="/login" component={Login} />
  </Router>
)

import { Route, Router, useNavigate } from "@solidjs/router";

const PrivateRoute = () => {
  const isLoggedIn = !!localStorage.getItem('token')
  const navigate = useNavigate()

  if (!isLoggedIn) {
    navigate('/login', { replace: true })
  }
  return <>private route</>;
};

const Login = () => {
  const navigate = useNavigate()

  const login = () => {
    localStorage.setItem('token', "whatever")
    navigate('/', { replace: true })
  }

  return <button onClick={login}> 
    login
  </button>
};

export default () => (
  <Router>
    <Route path="/" component={PrivateRoute}/>
    <Route path="/login" component={Login} />
  </Router>
)

Anish Neupane•5mo ago

import { Route, useNavigate } from '@solidjs/router'
import { lazy } from 'solid-js'

import { useAuth } from '../context/Auth'

const Index = lazy(() => import('../pages'))

const PrivateRoute = () => {
  const { isLoggedIn } = useAuth()
  const navigate = useNavigate()

  if (!isLoggedIn) {
    navigate('/login', { replace: true })
  }

  return (
    <>
      <Route path='/' component={Index} />
    </>
  )
}

export default PrivateRoute

import { MetaProvider } from '@solidjs/meta'
import { Route, Router } from '@solidjs/router'
import { Component } from 'solid-js'

import { AuthProvider } from './context/Auth'
import Login from './pages/Login.tsx'
import PrivateRoute from './routes'

const App: Component = () => {
  return (
    <AuthProvider>
      <MetaProvider>
        <Router>
          <Route path='/' component={PrivateRoute} />
          <Route path={'login'} component={Login} />
        </Router>
      </MetaProvider>
    </AuthProvider>
  )
}

export default App

import { Route, useNavigate } from '@solidjs/router'
import { lazy } from 'solid-js'

import { useAuth } from '../context/Auth'

const Index = lazy(() => import('../pages'))

const PrivateRoute = () => {
  const { isLoggedIn } = useAuth()
  const navigate = useNavigate()

  if (!isLoggedIn) {
    navigate('/login', { replace: true })
  }

  return (
    <>
      <Route path='/' component={Index} />
    </>
  )
}

export default PrivateRoute

import { MetaProvider } from '@solidjs/meta'
import { Route, Router } from '@solidjs/router'
import { Component } from 'solid-js'

import { AuthProvider } from './context/Auth'
import Login from './pages/Login.tsx'
import PrivateRoute from './routes'

const App: Component = () => {
  return (
    <AuthProvider>
      <MetaProvider>
        <Router>
          <Route path='/' component={PrivateRoute} />
          <Route path={'login'} component={Login} />
        </Router>
      </MetaProvider>
    </AuthProvider>
  )
}

export default App

But now warning popup in browser i.e Unrecognized value. Skipped inserting {children: undefined, path: '/', component: ƒ}

bigmistqke•5mo ago

Any reason why inside PrivateRoute you have another Route-component?

Anish Neupane•5mo ago

import { useNavigate } from '@solidjs/router'

import { useAuth } from '../context/Auth.tsx'

const PrivateRoute = props => {
  const { isLoggedIn } = useAuth()
  const navigate = useNavigate()

  if (!isLoggedIn) {
    navigate('/login', { replace: true })
  }

  return (
    <>
      <div>Private Router</div>
      {props.children}
    </>
  )
}

export default PrivateRoute

import { MetaProvider } from '@solidjs/meta'
import { Route, Router } from '@solidjs/router'
import { Component } from 'solid-js'

import { AuthProvider } from './context/Auth'
import Home from './pages'
import Login from './pages/Login'
import PrivateRoute from './routes'
import PublicRoute from './routes/PublicRoute'

const App: Component = () => {
  return (
    <AuthProvider>
      <MetaProvider>
        <Router>
          <Route component={PrivateRoute}>
            <Route path={'/'} component={Home} />
          </Route>
          <Route component={PublicRoute}>
            <Route path={'/login'} component={Login} />
          </Route>
        </Router>
      </MetaProvider>
    </AuthProvider>
  )
}

export default App

import { useNavigate } from '@solidjs/router'

import { useAuth } from '../context/Auth.tsx'

const PrivateRoute = props => {
  const { isLoggedIn } = useAuth()
  const navigate = useNavigate()

  if (!isLoggedIn) {
    navigate('/login', { replace: true })
  }

  return (
    <>
      <div>Private Router</div>
      {props.children}
    </>
  )
}

export default PrivateRoute

import { MetaProvider } from '@solidjs/meta'
import { Route, Router } from '@solidjs/router'
import { Component } from 'solid-js'

import { AuthProvider } from './context/Auth'
import Home from './pages'
import Login from './pages/Login'
import PrivateRoute from './routes'
import PublicRoute from './routes/PublicRoute'

const App: Component = () => {
  return (
    <AuthProvider>
      <MetaProvider>
        <Router>
          <Route component={PrivateRoute}>
            <Route path={'/'} component={Home} />
          </Route>
          <Route component={PublicRoute}>
            <Route path={'/login'} component={Login} />
          </Route>
        </Router>
      </MetaProvider>
    </AuthProvider>
  )
}

export default App

the problem is solved from above code but what will be props type ? const PrivateRoute = props =>

Anish Neupane•5mo ago

document link https://github.com/solidjs/solid-router#configure-your-routes

GitHub

GitHub - solidjs/solid-router: A universal router for Solid inspire...

A universal router for Solid inspired by Ember and React Router - GitHub - solidjs/solid-router: A universal router for Solid inspired by Ember and React Router

bigmistqke•5mo ago

so in the new router props.children in a route-component is a slot. that also explains why

<Route path='/'>
  <PrivateRoute />
</Route>

<Route path='/'>
  <PrivateRoute />
</Route>

does not produce anything, because there is no component in the component-prop that uses the props.children.

<Route component={PrivateRoute}>
  <Route path={'/'} component={Home} />
</Route>

<Route component={PrivateRoute}>
  <Route path={'/'} component={Home} />
</Route>

on the other hand does use the props.children-slot. Besides {children: JSX.Element} afaik there are no props on a route-component.

Anish Neupane•5mo ago

now see the difference with your code and my code

Anish Neupane•5mo ago

please check this also https://codesandbox.io/p/devbox/laughing-mcnulty-zz5ct3?file=%2Fsrc%2FApp.tsx%3A23%2C20

bigmistqke•5mo ago

what is the question?

Anish Neupane•5mo ago

you said

<Route path='/'>
  <PrivateRoute />
</Route>

<Route path='/'>
  <PrivateRoute />
</Route>

but while using this syntax error occur and the error is provided through image above with your syntax and other is my syntax and also provide the codesandbox with my example

bigmistqke•5mo ago

Besides {children: JSX.Element} afaik there are no props on a route-component.

that was incorrect assumption btw. there is RouteSectionProps

interface RouteSectionProps<T = unknown> {
    params: Params;
    location: Location;
    data?: T;
    children?: JSX.Element;
}

interface RouteSectionProps<T = unknown> {
    params: Params;
    location: Location;
    data?: T;
    children?: JSX.Element;
}

a sorry for the confusion, I tried to say that that's the incorrect way of doing it, since Route needs a component that uses the props.children.

Anish Neupane•5mo ago

So please review my code is this correct or not https://codesandbox.io/p/devbox/laughing-mcnulty-zz5ct3?file=%2Fsrc%2FApp.tsx%3A23%2C20

bigmistqke•5mo ago

does it do what u want it to do?

Anish Neupane•5mo ago

Thank you for your support

bigmistqke•5mo ago

ur welcome! i m still figuring out the new router too 🙂

Gaming

Programming

Error while using useNavigate() or <Navigate />