Estou iniciando meus estudos com o React e estou usando o React Router para fazer a navegação entre as páginas clicando em links no menu, mas estou com uma duvida, como faço para acessar uma página sem um link ? Como configuro uma rota nesse caso ?! O projeto eu criei usando o create-react-app e a rota que desejo configurar é /login para carregar a classe Login.js.
Código do Main.js com o menu:
import React, { Component } from "react";
import {
Route,
NavLink,
HashRouter
} from "react-router-dom";
import Home from "./Home";
import Stuff from "./Stuff";
import Contact from "./Contact";
class Main extends Component {
render() {
return (
<HashRouter>
<div>
<h1>Simple SPA</h1>
<ul className="header">
<li><NavLink exact to="/">Home</NavLink></li>
<li><NavLink to="/stuff">Stuff</NavLink></li>
<li><NavLink to="/contact">Contact</NavLink></li>
</ul>
<div className="content">
<Route exact path="/" component={Home}/>
<Route path="/stuff" component={Stuff}/>
<Route path="/contact" component={Contact}/>
</div>
</div>
</HashRouter>
);
}
}
export default Main;
Código do Login.js que quero configurar a rota e acessar direto pela URL:
import React, { Component } from "react";
class Login extends Component {
render() {
return (
<div>
<form>
<label>
Name:
<input type="text" name="name" />
</label>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
export default Login;