Dev Faq
1
votes

Comment utiliser Link dans React?

Je travaille actuellement sur le projet react qui est une application de connexion avec reactstrap. Mais je suis confronté à un problème lorsque j'utilise Link dans le composant d'inscription afin de lier le composant de connexion. Aidez-moi à résoudre ce problème.

component / signup.js: 

import React, { Component } from 'react'
import Signup from './component/signup'
import './App.css';


class App extends Component {
  render() {
    return (
      <Signup />
    )
  }
}

export default App

component / login.js: strong> 

import React, { Component } from 'react'
import '../App.css';
import {Button , Form, FormGroup, Label, Input} from 'reactstrap'
export class Login extends Component {
    render() {
        return (
      <Form className="login-form App">
        <h4 className="font-weight-bold text-center"> Login Form</h4>
        <FormGroup>
          <Label>Email</Label>
          <Input type="email" placeholder="Email Address"></Input>
        </FormGroup>
        <FormGroup>
          <Label>Password</Label>
          <Input type="password" placeholder="Password"></Input>
        </FormGroup>
        <Button type="submit" className="btn-primary btn-lg btn-block">Login</Button>
      </Form>
        )
    }
}

export default Login

App.js: 

import React, { Component } from 'react'
import {Link} from 'react-router-dom'
import '../App.css';
import {Button , Form, FormGroup, Label, Input} from 'reactstrap'
export class signup extends Component {
    render() {
        return (
        <Form className="login-form App">
        <h4 className="font-weight-bold text-center"> Sign Up Form</h4>
        <FormGroup>
          <Label>Full Name</Label>
          <Input type="text" placeholder="Full Name"></Input>
        </FormGroup>
        <FormGroup>
          <Label>Email</Label>
          <Input type="email" placeholder="Email Address"></Input>
        </FormGroup>
        <FormGroup>
          <Label>Password</Label>
          <Input type="password" placeholder="Password"></Input>
        </FormGroup>
        <Button type="submit" className="btn-primary btn-lg btn-block">Sign Up</Button>
        <p>Already Signup, <Link to ="/Login">Login</Link></p>
      </Form>
        )
    }
}

export default signup

6 commentaires

github.com/ ReactTraining / react-router / blob / master / packages /…

Avez-vous défini l'itinéraire / Login ?

Pouvez-vous exprimer quel problème que vous rencontrez? À quoi vous attendez-vous et ce qui se passe réellement.

Quelle est l'erreur que vous rencontrez?

Vous devez ajouter une route de connexion à votre App.js

vous pouvez utiliser comme ceci {title}

3 Réponses :

2
votes

Vous devez définir l'itinéraire Login dans votre App.js:

import React, { Component } from 'react'
import Signup from './component/signup'
import Login from './component/login' //Login should also be imported
import './App.css'
import { BrowserRouter as Router, Route } from "react-router-dom"//Router 



class App extends Component {
  render() {
    return (
      <Router> {/* Creating applications routes */}
          <Route exact path="/" component={Signup} /> {/*Signup Route*/}
          <Route exact path="/Login" component={Login} /> {/*Login Route*/}
      </Router>
    )
  }
}

export default App

Remarquez que j'ai défini votre inscription à la racine de votre application ( / ). Vous pouvez le pointer où vous le souhaitez et vous devrez peut-être définir d'autres itinéraires dans votre App.js

0 commentaires
0
votes

Il manque une partie importante de votre code:

    Le composant
  • Link est toujours encapsulé avec le composant Router
  • Pour Lier le composant, vous disposez d'un composant Switch contenant le composant Route .

Voici un exemple de code pour utiliser Link, Route, Router & Switch. J'espère que cela vous aidera 

import React, { Component } from "react";
import ReactDOM from "react-dom";
import { Route, Link, BrowserRouter as Router, Switch } from "react-router-dom";

import "./styles.css";

const User = ({ match }) => {
  console.log(match);
  return <h1>User: {match.params.id}</h1>;
};

class Users extends Component {
  render() {
    return (
      <div>
        <h1>Users</h1>
        <h2>Select a user</h2>
        <li>
          <Link to="/user/1">user 1</Link>
        </li>
        <li>
          <Link to="/user/2">user 2</Link>
        </li>
        <li>
          <Link to="/user/3">user 3</Link>
        </li>
        <Route path="/user/:id" component={User} />
      </div>
    );
  }
}

class Contact extends Component {
  render() {
    return (
      <div>
        <h1>Contact</h1>
      </div>
    );
  }
}

function App() {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
}

function NotFound() {
  return <h1>Not Found</h1>;
}

const routing = (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">home</Link>
        </li>
        <li>
          <Link to="/users">users</Link>
        </li>
        <li>
          <Link to="contact">contact</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/users" component={Users} />
        <Route path="/contact" component={Contact} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </Router>
);

const rootElement = document.getElementById("root");
ReactDOM.render(routing, rootElement);

Démo CodeSandbox: démo de code de travail

1 commentaires

Merci beaucoup!!

0
votes

Lorsque vous souhaitez utiliser le composant Link pour définir les liens de votre composant. Vous devez utiliser au plus haut niveau de votre arborescence de composants le composant BrowserRouter de react-router-dom

import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import { React } from 'react'; 
import { Signup } from './component/signup';
import { Login } from './component/Login';

export default function App(props) {
    return (
    <div>
        // Any code goes here
        <Router>
            <Switch>
                <Route exact={true} path="/login" component={Login}/>
                <Route exact={true} path="/signup" component={Login}/>
                <Redirect path="/login" />
            </Switch>
        </Router>
        // Any code goes here
    </div>
    )
}

Après avoir utilisé Router pour définir quel composant est rendu sur un chemin donné dans le composant le plus élevé de l'arborescence des composants, vous pouvez utiliser Link dans n'importe quel composant enfant

2 commentaires

Merci beaucoup !!

@Yves, veuillez tester votre code et corriger cette ligne: , component = {Signup}

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO