Javascript React路由器链路显示两个组件

我不知道用什么样的方式来描述这个问题，但我会尽我所能去解释

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

如果登录---我显示主页，如果没有，他们将进入登录屏幕

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

我怀疑这是我如何设置react路由器的问题，但我不确定问题出在哪里

以下是我的应用程序组件中的代码

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

{props.loggedUser(
} />
} />
} />
(
)}
/>
} />
}
/>
) : (
)}


博客应用，John 2019

这是我的登录组件。我已经尝试在上面的条件语句的两侧包括新用户页面的路由，然后在下面的登录表单中也包括路由，正如我现在所做的那样。所有这些都导致了同一个问题

<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>
    </>

登录到博客应用程序
用户名
密码
登录


或者注册成为新用户
} />

和新用户组件

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

从“React”导入React；
从“react redux”导入{connect}；
从“./reducers/userReducer”导入{createUser}；
从“./reducers/notificationReducer”导入{setNotification}；
从“语义ui反应”导入{Form，Button}；
const NewUser=props=>{
const addUser=事件=>{
event.preventDefault（）；
常量用户对象={
用户名：event.target.username.value，
名称：event.target.name.value，
密码：event.target.password.value
};
event.target.username.value=“”；
event.target.name.value=“”；
event.target.password.value=“”；
props.createUser（userObject）；
};
返回(
创建一个新的博客帐户
用户名
名称
密码
登录
);
};
const mapDispatchToProps={
createUser，
设置通知
};
导出默认连接（空，mapDispatchToProps）（新用户）；

您不应该执行条件呈现，因为当用户未登录时，会呈现Loggin组件，并且根本不依赖于路径。然后通过单击Link to=“/newuser”来更改路径，然后在内部进行注册渲染

我根据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>

{props.loggedUser&&(
)}
{props.loggedUser&&(
)}
{props.loggedUser&&(
(
)}
/>
)}
{props.loggedUser&&(
)}
{props.loggedUser&&(
(
)}
/>
)}
{props.loggedUser&&(
)}

没有足够的详细信息来回答此问题。您没有告诉我们哪个路由是“新用户”页面，因此不可能通过阅读代码进行调试。另外，如果用户已经登录，为什么要在路由中包括登录？这没有任何意义。我已经包含了NewUser组件，它是为登录表单下面的链接呈现的组件。希望这能有所帮助。我明白你所说的登录路径是什么意思了——我还是有点被React路由器弄湿了，这是问题的一部分。当你点击

新用户

路径的链接时，URL栏读到了什么？@JohnRogerson仍然没有足够的详细信息，因为在您的第一个代码段中，您根本没有显示该

NewUser

组件作为路由装入的任何位置。代码的其余部分在哪里\@MikeAbeln它显示了正确的路由/newusertry删除条件渲染，将包括newuser路由在内的所有路由分组，并使用从react-router-dom导出的交换机组件将其包装。感谢您的推荐。我完全按照你说的做了，现在看来效果不错。我要发布我的代码。也许这是一个更好的方法来做我正在做的重定向，但这是一个好的开始，我认为。谢谢更好的方法是有条件地呈现交换机内部的路由，如下所示：{props.loggedUser&&}，如果用户未登录，则对不希望呈现的每个路由组件重复此操作，并且在最后一个路由之后只添加一个重定向。路由排队很重要，因为交换机呈现指向当前路径的第一条路由，但如果用户未登录，则条件会保护这些路由，交换机将到达重定向。感谢您继续关注此问题。我确实采纳了你的建议，并重新发布了上面的代码，所有这些似乎都在起作用。希望这就是你的意思！这就是我的意思！只是代码的另一个调整，您可以使用从react导出的片段组件包装依赖于loggedUser的所有路由，并有条件地将其呈现如下：{props.logg