React Router Link 显示两个组件

Question

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

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

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

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

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

这是我的 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);

Answer 1

您不应该进行条件渲染，因为当用户未登录时，Loggin 组件会被渲染并且完全不依赖于路径。然后通过单击 Link to="/newuser" 更改路径，然后在内部呈现 Sign up

Answer 2

我根据 det2dachoppa 的建议完成了这项工作。去掉了条件，增加了开关和重定向，保证用户不登录就无法查看页面。

 <Router>
    <Notification />
    <div>
      <Navbar />
      <Switch>
        {props.loggedUser && (
          <React.Fragment>
            <Route exact path="/">
              <Blogs />
            </Route>
          </React.Fragment>
        )}
        {props.loggedUser && (
          <React.Fragment>
            <Route exact path="/blogs">
              <Blogs />
            </Route>
          </React.Fragment>
        )}
        {props.loggedUser && (
          <React.Fragment>
            <Route
              exact
              path="/blogs/:id"
              render={({ match }) => (
                <Blog
                  blog={blogById(match.params.id)}
                  user={props.loggedUser}
                  history={props.history}
                />
              )}
            />
          </React.Fragment>
        )}

        {props.loggedUser && (
          <React.Fragment>
            <Route exact path="/users">
              <Users />
            </Route>
          </React.Fragment>
        )}
        {props.loggedUser && (
          <React.Fragment>
            <Route
              exact
              path="/users:id "
              render={({ match }) => (
                <User user={userById(match.params.id)} />
              )}
            />
          </React.Fragment>
        )}
        {props.loggedUser && (
          <React.Fragment>
            <Route exact path="/newblog">
              <NewBlog />
            </Route>
          </React.Fragment>
        )}
        <Route path="/login">
          <Login />
        </Route>
        <Route path="/newuser">
          <NewUser />
        </Route>
        <Redirect to="/login">
          <Login />
        </Redirect>
      </Switch>
    </div>
  </Router>