React Router v6 - Navigate/Redirect to blanc page

Question

I am trying to upgrade to React Router v6 (react-router-dom 6.3.0).

I finished making many pages in my application and now i'm trying to protect its various routes.

My problem is: Whenever i modify App.js and add <BasicRoute /> and <AuthRoute />(similar to public & private route), i get a blank page.

Codesandbox link: Link

Theses are the errors in console.dev:

Uncaught Error: [undefined] is not a component. All component children of must be a or <React.Fragment>

The above error occurred in the component: at Routes ..., at ScoreProvider ..., at Router ..., at BrowserRouter ... Consider adding an error boundary to your tree to customize error handling behavior.

Uncaught Error: [undefined] is not a component. All component children of must be a or <React.Fragment>

App.js:

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import JobList from './views/JobList/JobList';
import Formulaire from './views/Form/Formulaire';
import Quiz from './views/Quiz/Quiz';
import Home from './views/Home/Home';
import Login from './views/Login/Login';
import Signup from './views/Signup/Signup';
import Dashboard from './views/Dashboard/Dashboard';
import { ScoreProvider } from './views/Helpers/scoreContext';
import { StyledContainer } from './components/Styles';
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";

//auth & redux
import AuthRoute from './components/AuthRoute';
import BasicRoute from './components/BasicRoute';


function App() {
  return (
    <StyledContainer>
      <BrowserRouter>
        <ScoreProvider>
          <Routes>
            <Route path="/" element={<Home />} />
            <AuthRoute path="/joblist" element={<JobList />} />
            <AuthRoute path="/form" element={<Formulaire />} />
            <AuthRoute path="/quiz" element={<Quiz />} />
            <BasicRoute path="/login" element={<Login />} />
            <BasicRoute path="/signup" element={<Signup />} />
            <AuthRoute path="/dashboard" element={<Dashboard />} />
          </Routes>
        </ScoreProvider>
      </BrowserRouter>
    </StyledContainer>
  );
}

export default App;

BasicRoute.js:

//Dashboard cannot be accessed unless Logged in

import { Route, Navigate } from 'react-router-dom'
import { connect } from 'react-redux'

const BasicRoute = ({ children, authenticated, ...rest }) => {
    return (
        <Route
            {...rest}
            render={
                ({ location }) => !authenticated ? (children) : (
                    <Navigate
                        to={{
                            pathname: "/joblist",
                            state: { from: location }
                        }}
                        /* replace */
                    />
                )
            }
        />
    )
}

const mapStateToProps = ({ session }) => ({
    authenticated: session.authenticated
})


export default connect(mapStateToProps)(BasicRoute);

AutRoute.js:

//Dashboard cannot be accessed unless Logged in

import { Route, Navigate } from 'react-router-dom'

const AuthRoute = ({ children, authenticated, ...rest }) => {
    return (
        <Route
            {...rest}
            render={
                ({ location }) => authenticated ? (children) : (
                    <Navigate
                        to={{
                            pathname: "/login",
                            state: { from: location }
                        }}
                        /* replace */
                    />
                )
            }
        />
    )
}

const mapStateToProps = ({ session }) => ({
    authenticated: session.authenticated
})


export default connect(mapStateToProps)(AuthRoute);

Edit:

Wrapping my routes with <AuthRoute> ... </AuthRoute> and <BasicRoute> ... </BasicRoute> doesn't help either, giving the same result as above (blanc page) which is my problem.

  return (
    <StyledContainer>
      <BrowserRouter>
        <ScoreProvider>
          <Routes>
            <Route path="/" element={<Home />} />
            <AuthRoute>
              <Route path="/joblist" element={<JobList />} />
              <Route path="/form" element={<Formulaire />} />
              <Route path="/quiz" element={<Quiz />} />
            </AuthRoute>
            <BasicRoute>
              <Route path="/login" element={<Login />} />
              <Route path="/signup" element={<Signup />} />
              <Route path="/dashboard" element={<Dashboard />} />
            </BasicRoute>
          </Routes>
        </ScoreProvider>
      </BrowserRouter>
    </StyledContainer>
  );

Edit (2):

Wrapping element around costum routers doesn't fix problem too.

<Route
  path="/joblist"
  element={
    <AuthRoute>
      <JobList />
    </AuthRoute>
  } />

Edit (3):

I tried to follow a tutorial that wrapped path in costume Route <Route element={<costumRoute/>}> but didn't fix my problem.

<Route
  element={
    <AuthRoute />
  } >
  <Route path="/joblist" element={<JobList />} />
</Route>

Edit (4):

(https://dev.to/iamandrewluca/private-route-in-react-router-v6-lg5)

I tried to do some adjustments to AuthRoute props, but didn't help, getting me the same result.

<AuthRoute path="/joblist" element={<JobList />} />

PS : I will keep this question updated with my attempts till i find a solution. Also this question didn't fix my problem.

Answer 1

You should put your custom routers in the Route component.

example:

<Route path="/joblist" element={
  <AuthRoute>
  <JobList />
  </AuthRoute>} 
/>

Note: If you use a wrapper Route the path you used in that route is available for the child routes.

For your custom components:

function CustomRoute({children, credentials}){
  if(credentials){
     return children;
  }
  
  return <Navigate to="/yourPath" />;
}