when my route is placed in child components url is changing but component is not rendering

Question

import './App.css';
import AppRoutes from './AppRoutes'
import {BrowserRouter as Router} from "react-router-dom"
import AppHeader from './modules/platform-components/app-header/AppHeader'

function App() {
  return (
    <div className="App">
      <AppRoutes />
    </div>
  );
}

export default App;```

// Above is my App.js

```import React,{Component} from "react"
import {Route,Switch} from "react-router-dom"
import Login from "./modules/authentication/login/Login"
import BaseApp from "./modules/platform-components/base-app/BaseApp"
export default function AppRoutes (){

        return (
            <Switch>
                <Route path="/" exact component={Login}/>
                <Route path="/login" component={Login}/>       
                <Route exact path="/app" component={BaseApp}/>
            </Switch>           

        )

}```

//above is AppRoutes.js

import React,{Component} from "react" import Routes from './Routes' import AppHeader from '../app-header/AppHeader' import {Route,Switch,Link ,withRouter,useRouteMatch} from "react-router-dom" function BaseApp(){ let match= useRouteMatch() return ( Base App Component App Header
) } export default BaseApp;```

//this is my baseApp

 function Appheader(){
        return (
            <div>App Header Component</div>
        )    
}
export default Appheader;```

//above is my app header 
`when i am entering url /app it isnavigating to baseApp component but when i enter /app/appheader it's not rendering anything but url is changed `

crrmacarse crrmacarse · Accepted Answer · 2020-01-26T17:05:06

Switch your route with this

<Switch>
   <Route exact path="/" exact component={Login}/>
   <Route path="/app" component={BaseApp}/>
   <Route path="/login" component={Login}/>       
   <Route component={() => <div>Not Found</div>}/> // you could also add this line to cater with your 404 routes
</Switch>

read more here: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md

when my route is placed in child components url is changing but component is not rendering

1 Answers