Having Trouble with ReactJS Links - reactjs

Question

I started off thinking this was going to be an easy issue; however I was wrong. I have the following home page:
import React,{Component} from "react";
import {Link} from "react-router-dom";
const Home = (props) =>{
return(
<div>
<h1>My Portal Home</h1>
Click <Link to="/login">Here</Link> To Log In.
</div>
)
}
export default Home;
My main component looks like this: I am certain it is NOT what it is supposed to look like:
import React, {Component} from "react";
import {Router, Route, Link} from "react-router-dom";
import Login from './login/login';
import Home from './home/home';
const Main = (props) =>{
return(
<Router>
<div>
<Route path="/" component={Home}/>
<Route path="/login" component={Login}/>
</div>
</Router>
);
};
export default Main;
Finally my index:
import React from 'react';
import ReactDOM from 'react-dom'
import Main from "./main";
import './index.css';
ReactDOM.render(<Main />,document.getElementById('root'));
When I enter the site address, the home pages does not show and I get errors (warnings):
Failed prop type: Invalid prop 'component' supplied to 'Route': the prop is not a valid React component
in Route (at main.js:11)
I am OBVIOUSLY doing this wrong, but my goal is to have a home page with a link to my login page. Assistance is greatly appreciated.

Answer 1

Try the following:
Main.js
import React from "react";
import {BrowserRouter, Route} from "react-router-dom";
import Login from './Login';
import Home from './Home';
const Main = () =>{
return(
<BrowserRouter>
<div>
<Route exact path="/" component={Home}/>
<Route path="/login" component={Login}/>
</div>
</BrowserRouter>
);
};
export default Main;
Home.js
import React from "react";
import {Link} from "react-router-dom";
const Home = () =>{
return(
<div>
<h1>My Portal Home</h1>
Click <Link to="/login">Here</Link> To Log In.
</div>
)
};
export default Home;
Login.js
import React from "react";
const Login = () =>{
return(
<div>
Login
</div>
);
};
export default Login;

Answer 2

Made a CodeSandbox, hopefully this helps
CodeSandbox
Main.js
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Main = () => (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
</div>
</Router>
);
const Home = () => (
<div>
<h2> Home </h2>
</div>
);
const Login = () => (
<div>
<h2> Login Page </h2>
</div>
);
export default Main;