I have this folder structure
src
|
+-- pages
| |
| +--Dashboard.js
| +--Homepage.js
|
+-- index.js
So index.js renders the homepage to the screen. On homepage.js I have a button, and I just want it so when the user clicks the button, it goes to dashboard.js
Here is index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Homepage from './pages/Homepage';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
<BrowserRouter>
<Homepage />
</BrowserRouter>), document.getElementById('root'));
registerServiceWorker();
And here is the Homepage with the button on it
import React, { Component } from 'react';
class Homepage extends Component {
render() {
return (
<div>
<h1>Homepage</h1>
<button>Go to Dashboard</button>
</div>
);
}
}
export default Homepage;
How can I achieve this? I can't just find a simple solution online. Thanks for help.