Как использовать ссылку в React?

Question

В настоящее время я работаю над проектом реагировать, который представляет собой приложение для входа в систему с использованием activstrap. Но я сталкиваюсь с проблемой, когда я использую Link в компоненте регистрации, чтобы связать компонент входа в систему. Пожалуйста, помогите мне решить эту проблему.

компонент / регистрация. 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

компонент / вход. js:

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

Приложение. js:

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


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

export default App

Answer 1

Вам необходимо определить маршрут Login в вашем 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

Обратите внимание, что вы определили вашу регистрацию в root вашего приложения (/). Вы можете указать его куда угодно, и вам может понадобиться определить другие маршруты в вашем App.js

Answer 2

Когда вы хотите использовать компонент Link, чтобы определить, какие ссылки в вашем компоненте. Вы должны использовать на самом высоком уровне вашего дерева компонентов компонент BrowserRouter из 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>
    )
}

После того, как вы используете Router, чтобы определить, какой компонент отображается на данном пути в компоненте Highest в дерево компонентов, которое вы можете использовать Link в любом дочернем компоненте

Answer 3

В вашем коде отсутствует какая-то важная часть:

• Link компонент всегда заключен в Router компонент
• Для Link компонента у вас есть Switch компонент, содержащий Route компонент.

Ниже приведен пример кода для использования Link, Route, Router & Switch. Надеюсь, что это поможет

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);

CodeSandbox демо: рабочий код демо