javascript - React Router Link 显示两个组件

问题描述

我不知道描述这个问题的最佳方式，但我会尽力解释。

在我的核心 React App 组件中，我正在根据用户是否登录进行条件渲染。

如果登录 --- 我显示主页，如果没有，他们会看到登录屏幕。

在我的登录页面上，我试图在底部放置一个链接，引导用户注册一个新帐户。我的问题是，当我单击此“newuser”页面时，它会同时呈现我的登录表单和创建用户表单，它们都是不同的组件（见下文）。

我怀疑这是我如何设置反应路由器的问题，但我不确定问题是什么。

这是我的 App 组件中的代码。

 <Container>
      <Router>
        <Notification />
        {props.loggedUser ? (
          <div>
            <Navbar />
            <Route exact path="/" render={() => <Blogs />} />
            <Route exact path="/blogs" render={() => <Blogs />} />
            <Route path="/login" render={() => <Login />} />
            <Route
              exact
              path="/blogs/:id"
              render={({ match }) => (
                <Blog
                  blog={blogById(match.params.id)}
                  user={props.loggedUser}
                />
              )}
            />
            <Route exact path="/users" render={() => <Users />} />
            <Route
              exact
              path="/users/:id"
              render={({ match }) => <User user={userById(match.params.id)} />}
            />
          </div>
        ) : (
          <>
            <Login />
          </>
        )}
      </Router>
      <div>
        <br />
        <em>Blog app, John 2019</em>
      </div>
    </Container>

这是我的登录组件。我已经尝试在上面的条件语句的两侧以及下面的登录表单中包含新用户页面的路由，就像我现在所做的那样。所有这些都导致相同的问题。

<h1>Login To Blog Application</h1>
      <Form onSubmit={handleLogin}>
        <Form.Field>
          <label>username</label>
          <input {...username.omitreset} name="username" />
        </Form.Field>
        <Form.Field>
          <label>password</label>
          <input {...password.omitreset} type="password" />
        </Form.Field>
        <Button type="submit">login</Button>
        <div>
          <br />
          <Link to="/newuser">or signup to become a new user</Link>
          <Route path="/newuser" render={() => <NewUser />} />
        </div>
      </Form>
    </>

和 NewUser 组件

import React from "react";
import { connect } from "react-redux";
import { createUser } from "../reducers/userReducer";
import { setNotification } from "../reducers/notificationReducer";
import { Form, Button } from "semantic-ui-react";

const NewUser = props => {
  const addUser = event => {
    event.preventDefault();

    const userObject = {
      username: event.target.username.value,
      name: event.target.name.value,
      password: event.target.password.value
    };

    event.target.username.value = "";
    event.target.name.value = "";
    event.target.password.value = "";
    props.createUser(userObject);
  };

  return (
    <>
      <h1>Create a New Blog Account</h1>
      <Form onSubmit={addUser}>
        <Form.Field>
          <label>username</label>
          <input {...props.username} name="username" />
        </Form.Field>
        <Form.Field>
          <label>name</label>
          <input {...props.name} type="password" />
        </Form.Field>
        <Form.Field>
          <label>password</label>
          <input {...props.password} type="password" />
        </Form.Field>
        <Button type="submit">login</Button>
      </Form>
    </>
  );
};

const mapDispatchToProps = {
  createUser,
  setNotification
};

export default connect(null, mapDispatchToProps)(NewUser);

标签： javascriptreactjsreact-router

javascript - React Router Link 显示两个组件

问题描述

解决方案

推荐阅读