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 ponent structure:

• Home
  • Login
  • Register
• Recipes
• Ingredients

Have the following ponents:

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 ponent={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' ponent={Home} />
                    <Route path='/recipes' ponent={Recipes} />
                    <Route path='/ingredients' ponent={Ingredients} />
                    <Route render={() => <h1>Not found!</h1>} />
                </Switch>
            </div>
    );
  }
}

export default YanuqApp;

Ingredients and Recipes ponents 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' ponent={Login} />
                    <Route path='/home/register' ponent={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`} ponent={Register} />

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

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 ponent structure:

• Home
  • Login
  • Register
• Recipes
• Ingredients

Have the following ponents:

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 ponent={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' ponent={Home} />
                    <Route path='/recipes' ponent={Recipes} />
                    <Route path='/ingredients' ponent={Ingredients} />
                    <Route render={() => <h1>Not found!</h1>} />
                </Switch>
            </div>
    );
  }
}

export default YanuqApp;

Ingredients and Recipes ponents 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' ponent={Login} />
                    <Route path='/home/register' ponent={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`} ponent={Register} />

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

• javascript
• reactjs
• react-router

Share Improve this question Follow asked Aug 21, 2019 at 11:45 zamebzameb 8501717 silver badges3232 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 14

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.

   try to add this in App.js


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

to this is work

<Link to={`${match.path}/register`}>Register</Link>
...
<Route path={`${match.path}/register`} ponent={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`} ponent={Register} />
})