Change webpage in node js button click - node.js

Question

I am currently working with node.js and have this question,
How can i go from one page to the other by clicking the "test" button? I am trying to get from ./Landing to ./Login by pressing the button
This is my code:
import React, { Component } from 'react'
import { Route, NavLink, HashRouter } from "react-router-dom";
import Login from "./Login";
class Landing extends Component {
render () {
return (
<button type="submit" class="btn btn-test">test</button>
);
}
}
export default Landing
Thank you in advance for your help!

Answer 1

J, you can look for the react-router-dom
On a summarised way, you will need to this:
Import react-router-dom dependencies
Create router.js file, like this:
import { Switch, Route, BrowserRouter } from 'react-router-dom'
import { components } from './YOUR_COMPONENTS_FOLDER'
const Router = () => (
<main>
<BrowserRouter>
<Switch>
<Route exact path="/" component={components.mainComponent} />
<Route exact path="/login" component={components.loginComponent} />
<Route component={components.notFoundComponent} />
</Switch>
</BrowserRouter>
</main>
)
export default Router
Add this router.js file into your App.jsx:
import Router from './router'
...
class component extends React.PureComponent {
...
render() {
...
return (
...
<Router />
...
)
}
}
Once you add Router into App.jsx file, remove any reference of your old code for main page.
To open a page, you will add this to your component:
import { Link } from 'react-router-dom'
...
render () {
<Link to="/login">
YOUR BUTTON or something else to be clicked
</Link>
}
...
Here are some references that may help you:
https://reacttraining.com/react-router/web/guides/quick-start
https://blog.pshrmn.com/entry/simple-react-router-v4-tutorial/

Answer 2

Hence you can use react router you could add one more route
Look at below example link for more details
[CodePen] https://codepen.io/dwarka/pen/PLEMWX