Reactjs 反应：如何链接到不同的组件（在同一页面中打开）

我有一个简单的应用程序，有两个页面：一个用于登录，另一个用于注册。我希望他们彼此有链接。正如我所知，React链接有着不同的理论基础，我宁愿撒谎，也不愿听取经验丰富的同事对如何做到这一点的看法。这是

登录视图的代码

：

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import axios from 'axios';
import './login-view.scss';
import { RegistrationView } from '../registration-view/registration-view';

export function LoginView(props) {
  const [ username, setUsername ] = useState('');
  const [ password, setPassword ] = useState('');
// need to update handleSubmit to prevent refresh
  const handleSubmit = (e) => {
    e.preventDefault();
    /* Send a request to the server for authentication */
    axios.post('https://flix-app-test.herokuapp.com/login', {
        username: username,
        password: password
      })
      .then(response => {
        const data = response.data;
        props.onLoggedIn(data);
      })
      .catch(e => {
        console.log('no such user')
      });
  };

    const handleNewUser = (e) => {
      e.preventDefault();
      console.log('new_user');

      setUsername('New');
      props.onLoggedIn(username);
    };

  return (
    <div>
      <h1>myFlix Login</h1>
      <Form>
        <Form.Group controlId="formBasicUsername">
          <Form.Label>Username</Form.Label>
          <Form.Control type="text" value={username} onChange={e => setUsername(e.target.value)} placeholder="Enter username" />
        </Form.Group>
        <Form.Group controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Password" />
        </Form.Group>
        <Button onClick={handleSubmit}>Submit</Button>
      </Form>
    </div>

  );
}

LoginView.propTypes = {
  username: PropTypes.string.isRequired,
  password: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired
};

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import { LoginView } from '../login-view/login-view';
import './registration-view.scss';

export function RegistrationView(props) {
  const [ username, setUsername ] = useState('');
  const [ password, setPassword ] = useState('');
  const [email, setEmail ] = useState('');
  const [birthday, setBirthday ] = useState('');
// need to update handleSubmit to prevent refresh
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(username, password, email, birthday);
    /* Send a request to the server for authentication */
    /* then call props.onLoggedIn(username) */
    props.onLoggedIn(username);

  };

  return (
    <div>
      <h1>Signup for myFlix</h1>
      <Form>
        <Form.Group controlId="formUsername">
          <Form.Label>Username</Form.Label>
          <Form.Control type="text" value={username} onChange={e => setUsername(e.target.value)} placeholder="Enter the username you want to use" />
        </Form.Group>
        <Form.Group controlId="formPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control type="text" value={password} onChange={e => setPassword(e.target.value)} placeholder="Enter a password" />
        </Form.Group>
        <Form.Group controlId="formEmail">
          <Form.Label>Email address</Form.Label>
          <Form.Control type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="Enter email" />
          <Form.Text className="text-muted">
            We'll never share your email with anyone else.
        </Form.Text>
          <Form.Group controlId="formBirthday">
            <Form.Label>Password</Form.Label>
            <Form.Control type="date" value={birthday} onChange={e => setBirthday(e.target.value)} placeholder="Enter your birthday date" />
          </Form.Group>
        </Form.Group>
        <Button onClick={handleSubmit}>Submit</Button>
      </Form>
    </div>
  );
}
RegistrationView.propTypes = {
  username: PropTypes.string.isRequired,
  password: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
  birthday: PropTypes.string,
  onClick: PropTypes.func.isRequired
};

---

我可以使用任何包，如

react router dom

，因此没有任何限制。提前感谢。

您可以使用

react路由器

轻松实现这一点。首先，在树顶部的组件（通常是

App

）中配置路由器，将每个

路径映射到特定组件

import { BrowserRouter as Router, Route } from 'react-router-dom'
import { Login, Registration } from './components'

const App = () =>{
    return(
        <Router>
            <Route path='/login' component={Login} />
            <Route path='/registration' component={Registration} />
        </Router>
    )
}

import { Link } from 'react-router-dom'
const Login = () =>{
    return(
        <Link to='/registration'>
            Go to registration
        </Link>
    )
}

对于更重要的API，您应该知道路由器呈现的每个组件都注入了特殊的道具：
历史
、
匹配
和
位置
。要从处理程序内部更改当前路由，可以使用
history.push

const handleClick = () =>{
    props.history.push('/registration')
}

上组件语法的路径应该是
是否与我导入组件时使用的相同

不是，不是。组件的绝对路径与提供给
路由器的
路径
无关

import { Foo } from './foo'
/*...*/
<Route path='/bar' /> 

从“/Foo”导入{Foo}
/*...*/

当实现
登录时
如果我试图呈现它，它会说我不应该
使用路由器外的链路

我忘了提到要使用
链接
必须在路由器上下文中。这意味着您从中调用
链接
（在您的情况下是
登录
）的组件必须由路由器呈现。换句话说，它必须在一个
路由
组件中定义路由。
您可以使用
反应路由
轻松实现这一点。首先，在树顶部的组件（通常是
App
）中配置路由器，将每个
路径映射到特定组件

import { BrowserRouter as Router, Route } from 'react-router-dom'
import { Login, Registration } from './components'

const App = () =>{
    return(
        <Router>
            <Route path='/login' component={Login} />
            <Route path='/registration' component={Registration} />
        </Router>
    )
}

import { Link } from 'react-router-dom'
const Login = () =>{
    return(
        <Link to='/registration'>
            Go to registration
        </Link>
    )
}

对于更重要的API，您应该知道路由器呈现的每个组件都注入了特殊的道具：
历史
、
匹配
和
位置
。要从处理程序内部更改当前路由，可以使用
history.push

const handleClick = () =>{
    props.history.push('/registration')
}

上组件语法的路径应该是
是否与我导入组件时使用的相同

不是，不是。组件的绝对路径与提供给
路由器的
路径
无关

import { Foo } from './foo'
/*...*/
<Route path='/bar' /> 

从“/Foo”导入{Foo}
/*...*/

当实现
登录时
如果我试图呈现它，它会说我不应该
使用路由器外的链路

我忘了提到要使用
链接
必须在路由器上下文中。这意味着您从中调用
链接
（在您的情况下是
登录
）的组件必须由路由器呈现。换句话说，它必须在一个
路由
组件中定义路由。
我相信我们可以使用
反应滚动

import * as Scroll from 'react-scroll';
import { Link, Element } from 'react-scroll''; 

<ScrollLink to="footerContainer">
     <Button className="hero-content-button" variant="info">Know More</Button>
</ScrollLink>

<Element name="footerContainer">
    <Footer />
</Element> 

import*作为“react Scroll”的滚动；
从“react scroll”导入{Link，Element}；
了解更多

ScrollLink
从将按钮链接到footerContainer的
react scroll
导入

每次单击按钮时，屏幕将向下滚动到页脚组件
我相信我们可以使用
反应滚动

import { BrowserRouter as Router, Route } from 'react-router-dom'
import { Login, Registration } from './components'

const App = () =>{
    return(
        <Router>
            <Route path='/login' component={Login} />
            <Route path='/registration' component={Registration} />
        </Router>
    )
}

import { Link } from 'react-router-dom'
const Login = () =>{
    return(
        <Link to='/registration'>
            Go to registration
        </Link>
    )
}

import * as Scroll from 'react-scroll';
import { Link, Element } from 'react-scroll''; 

<ScrollLink to="footerContainer">
     <Button className="hero-content-button" variant="info">Know More</Button>
</ScrollLink>

<Element name="footerContainer">
    <Footer />
</Element> 

import*作为“react Scroll”的滚动；
从“react scroll”导入{Link，Element}；
了解更多

ScrollLink
从将按钮链接到footerContainer的
react scroll
导入

每次点击按钮，屏幕将向下滚动至页脚组件，但还有两个问题：
上的组件语法路径应该与我导入组件时使用的路径相同；2） 当我实现
Login
时，如果我尝试渲染它，它会说我不应该使用路由器外部的
链接。您有什么建议并再次表示感谢。提前感谢一千，但还有两个问题：1）
上组件语法的路径应该与我导入组件时使用的路径相同；2） 当我实现
Login
时，如果我尝试渲染它，它会说我不应该使用路由器外部的
链接。你有什么建议并再次感谢。这是一个很酷的库，但在那种情况下它并没有真正的帮助。这是一个很酷的库，但在那种情况下它并没有真正的帮助。
import { BrowserRouter as Router, Route } from 'react-router-dom'
import { Login, Registration } from './components'

const App = () =>{
    return(
        <Router>
            <Route path='/login' component={Login} />
            <Route path='/registration' component={Registration} />
        </Router>
    )
}

import { Link } from 'react-router-dom'
const Login = () =>{
    return(
        <Link to='/registration'>
            Go to registration
        </Link>
    )
}