doesn’t work when I separate the routes into other components

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

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>


    )
}

Advertisement

Answer