如何在React中使用Link？

Question

我目前正在使用Reactstrap开发React项目，这是一个登录注册应用程序。但是，当我在注册组件中使用链接来链接登录组件时，我遇到了一个问题。请帮助我解决这个问题。

component / signup.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

component / login.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

App.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'
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