0

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;

1 Resposta 1

5

Primeiro você deve importar o login no Main.js
Main.js

import Login from "./Login";

Depois ainda dentro do seu Main.js você deve adicionar a rota

<div className="content">
    // Rota login adicionada
    <Route exact path="/login" component={Login}/>

    <Route exact path="/" component={Home}/>
    <Route path="/stuff" component={Stuff}/>
    <Route path="/contact" component={Contact}/>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .