<Redirect /> doesn't work when I separate the routes into other components

Question

The problem is that when entering a route that does not exist the does not work, this only happens when I separate the / login and / register routes in another component, is there any way to solve it? Thanks for reading

AppRouter.js

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Switch,
    Link,
    Redirect
} from 'react-router-dom'

import JournalScreen from '../screens/JournalScreen'
import AuthRoutes from './AuthRoutes'

export default function AppRouter() {
    return (
        <Router>

            <nav>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/noexists">no exists</Link>
                    </li>
                    <li>
                        <Link to="/register">register</Link>
                    </li>
                    <li>
                        <Link to="/login">login</Link>
                    </li>
                </ul>
            </nav>

            <Switch>

                <Route exact path="/" component={JournalScreen} />
                
                <AuthRoutes />

                <Redirect to="/" />

            </Switch>

        </Router>
    )
}

AuthRoutes.js

import React from 'react'
import { Route } from 'react-router-dom'
import LoginScreen from '../screens/LoginScreen'
import RegisterScreen from '../screens/RegisterScreen'

export default function AuthRouter() {
    return (

        <div className="app__auth">

            <Route path="/login" component={LoginScreen} />

            <Route path="/register" component={RegisterScreen} />

        </div>


    )
}

Answer 1

From the react router docs :

<Switch>

Renders the first child <Route> or <Redirect> that matches the location.

So, your Route components have to be direct children of Switch in order to work properly.
This can be solved by using fragments in your AuthRouter component

export default function AuthRouter() {
  return (
    <>
      <Route path="/login" component={LoginScreen} />
      <Route path="/register" component={RegisterScreen} />
    </>
  )
}

Another thing to note is that all react-router functions will only work in elements that are a child of a Router component. So if you have another component that is not a child of AppRouter , you won't be able to use any of react-router's capabilities

Most commonly, wrapping your entire app in a single Router component is the way to go. This is also taken from the docs :

To use a router, just make sure it is rendered at the root of your element
hierarchy. Typically you’ll wrap your top-level <App> element in a router

Answer 2

I found this solution:

AppRouter.js

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    Switch,
    Link,
    Redirect
} from 'react-router-dom'

import JournalScreen from '../screens/JournalScreen'
import AuthRoutes from './AuthRoutes'

export default function AppRouter() {
    return (
        <Router>

            <nav>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/noexists">no exists</Link>
                    </li>
                    <li>
                        <Link to="/register">register</Link>
                    </li>
                    <li>
                        <Link to="/login">login</Link>
                    </li>
                </ul>
            </nav>

            <Switch>

                <Route exact path="/" component={JournalScreen} />

                <AuthRoutes />

                <Redirect to="/" />

            </Switch>

        </Router>
    )
}

AuthRoutes.js

import React from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import LoginScreen from '../screens/LoginScreen'
import RegisterScreen from '../screens/RegisterScreen'

export default function AuthRoutes() {

    return (

        <div className="app__auth">

            <Switch>

                <Route path="/login" component={LoginScreen} />

                <Route path="/register" component={RegisterScreen} />

                <Redirect to="/" />

            </Switch>

        </div>


    )
}