React Router v5 nested routes not found

Question

I'm having problems trying to make a simple setup to run. I have used "react-router-dom" because it claims to be the most documented router around. Unfortunately, the documentation samples are using functions instead of classes and I think a running sample will not explain how routes have changed from previous versions... you need a good sight!. Btw, there are a lot of breaking changes between versions.

I want the following component structure:

• Home
  • Login
  • Register
• Recipes
• Ingredients

Have the following components:

index.js (works fine)

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import App from './App';

ReactDOM.render((
    <BrowserRouter>
        <Route component={App}/>
    </BrowserRouter>
), document.getElementById('root'));

App.js (fine)

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home'
import Recipes from './recipes/Recipes'
import Ingredients from './ingredients/Ingredients'

class App extends React.Component {
    render() {
        return (
            <div id="App">
                <Switch>
                    <Route exact path='/home' component={Home} />
                    <Route path='/recipes' component={Recipes} />
                    <Route path='/ingredients' component={Ingredients} />
                    <Route render={() => <h1>Not found!</h1>} />
                </Switch>
            </div>
    );
  }
}

export default YanuqApp;

Ingredients and Recipes components working fine, so I'll skip from here

Home.js - The problem starts here. Home itself loads correctly, but once Login or Register links are clicked, it shows "Not found!" (fallback route in App.js)

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import Register from './account/register'
import Login from './account/login'

class Home extends React.Component {
    render() {
        return (
            <div>
                <div>
                    This is the home page...<br/>
                    <Link to='/home/login'>Login</Link><br />
                    <Link to='/home/register'>Register</Link><br />
                </div>
                <Switch>
                    <Route path='/home/login' component={Login} />
                    <Route path='/home/register' component={Register} />
                </Switch>
            </div>
        );
    }
}

export default Home;

Login and register are very similar:

import React from 'react';

class Login extends React.Component {
    render() {
        alert("login");
        return (
            <div>Login goes here...</div>
        );
    }
}

export default Login;

And cannot figure why Login and Register are not found. I have tried also defining routes as:

<Link to={`${match.path}/register`}>Register</Link>
...
<Route path={`${match.path}/register`} component={Register} />

(don't see the gain on using match, as it renders as the expected "/home/register"), but the problem persists in identical way

Answer 1

   try to add this in App.js


<Switch>
                <Route exact path='/' component={Home} />
                <Route path='/recipes' component={Recipes} />
                <Route path='/ingredients' component={Ingredients} />
                <Route path='/login' component={Login} />
                <Route path='/register' component={Register} />
                <Route render={() => <h1>Not found!</h1>} />
            </Switch>

to this is work

<Link to={`${match.path}/register`}>Register</Link>
...
<Route path={`${match.path}/register`} component={Register} />

you should provide match as the props because cont access directly to the match to used it you should provide a match as this following

const namepage=({match})=>{
<Link to={`${match.path}/register`}>Register</Link>
    ...
    <Route path={`${match.path}/register`} component={Register} />
})

Answer 2

I think it's because of the exact flag on the Route for home. It does not match the /home exact so it goes to the default not found page.