React Router Links getting Change but not the View - reactjs

Question

Hi I googled everywhere about my problem still no luck for me.
Here i attached my sample code.
import React from 'react';
import {
BrowserRouter,
Route,
Switch,
NavLink,
Redirect
} from "react-router-dom";
const Login = () => <div> Login Content <NavLink to ="/AppHome"> go to App</NavLink> </div>;
const Register = () => <div> Register Content </div>;
const AppHome = () => <div> Welcome to the App </div>;
class Authenticate extends React.Component {
render() {
return (
<>
<div>
<NavLink to={"/Login"}> Login </NavLink>
<NavLink to = {"/Register"} > Register < /NavLink>
</div>
<div>
<Switch >
<Route path={"/"} component={Login} />
<Route path={"/Login"} component={Login}/>
<Route path={"/Register"} component = {Register}/>
</Switch>
</div>
</>
);
}
}
class App extends React.Component {
render() {
return (
<BrowserRouter >
<Switch >
<Route path="/" component={Authenticate}/>
<Route path="/AppHome" component={AppHome}/>
</Switch>
</BrowserRouter>
)
}
}
export default App;
Here, In Localhost:3000 , i set Login Component as default to show. it shows the view but when clicking on the signup link, url only changing not the view. what am i done wrong?

Answer 1

You are trying to nest the routes, but in your case this seems unnecessary.
I would setup my routes like this without nested routing:
import React from "react";
import {
BrowserRouter,
Route,
Switch,
NavLink,
Redirect
} from "react-router-dom";
class App extends React.Component {
render() {
return (
<BrowserRouter>
<Authenticate />
<Switch>
<Route path="/" exact component={Login} />
<Route path="/Login" component={Login} />
<Route path="/Register" component={Register} />
<Route path="/AppHome" component={AppHome} />
</Switch>
</BrowserRouter>
);
}
}
const Login = () => (
<div>
Login Content <NavLink to="/AppHome"> go to App</NavLink>
</div>
);
const Register = () => <div> Register Content </div>;
const AppHome = () => <div> Welcome to the App </div>;
class Authenticate extends React.Component {
render() {
return (
<>
<div>
<NavLink to={"/Login"}> Login </NavLink>
<NavLink to={"/Register"}> Register </NavLink>
</div>
</>
);
}
}
export default App;
Codesandbox

Answer 2

import React from 'react'
import ReactDOM from 'react-dom'
import {HashRouter, Route, Switch, NavLink} from 'react-router-dom'
class App extends React.Component {
render() {
return (
<HashRouter>
<Switch>
<Route path="/Login" component={Login} />
<Route path="/Register" component={Register} />
<Route path="/" component={AppHome} />
</Switch>
</HashRouter>
)
}
}
const Login = () => (
<div>
Login Content <NavLink to="/AppHome"> go to App</NavLink>
</div>
)
const Register = () => <div> Register Content </div>
const AppHome = () => <div> Welcome to the App </div>
export default App
ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Can you please check this Codesandbox Once.