调用一个组件时获得两个组件答案

【问题标题】：getting two components when calling one调用一个组件时获得两个组件
【发布时间】：2020-12-10 04:04:23
【问题描述】：

router.js 代码在这里

import  React from 'react';
import { Route } from 'react-router-dom';
import CommentList from './containers/commentview';
import CommentDetalList  from './containers/commentdetailview';
import Demo from './containers/Login'
const BaseRouter = () =>(
<div>
    <Route exact path='/' component={CommentList}/>
    <Route exact path='/:commentid' component={CommentDetalList}/>
    <Route exact path='/login' component={Demo}/>

 </div>
 )
 export default BaseRouter;

login.js where Demo is Code is here

      import React from 'react';
      import { Form, Input, Button, Checkbox } from 'antd';

      const layout = {
       labelCol: {
     span: 8,
      },
     wrapperCol: {
     span: 16,
    },
     };
    const tailLayout = {
    wrapperCol: {
    offset: 8,
    span: 16,
    },
    };

   const Demo = () => {
   return (
   <Form
   {...layout}
   name="basic"
   initialValues={{
    remember: true,
   }}
   >
   <Form.Item
    label="Username"
    name="username"
    rules={[
      {
        required: true,
        message: 'Please input your username!',
      },
    ]}
  >
    <Input />
  </Form.Item>

  <Form.Item
     label="Password"
      name="password"
      rules={[
       {
        required: true,
        message: 'Please input your password!',
       },
     ]}
     >
    <Input.Password />
    </Form.Item>

    <Form.Item {...tailLayout} name="remember" valuePropName="checked">
    <Checkbox>Remember me</Checkbox>
    </Form.Item>

    <Form.Item {...tailLayout}>
    <Button type="primary" htmlType="submit">
      Submit
    </Button>
    </Form.Item>
     </Form>
     );
       };
     export default Demo;

所以问题是当我访问 http://localhost:3000/1 时，我从 id 1 id 获取视图，但是当我访问 http://localhost:3000/login 时，我从 id1 获取视图还有登录页面，但是你可以看到 democode 或 login.js 代码我只返回登录页面我想在我转到 http://localhost:3000/login 时获得唯一的登录页面

【问题讨论】：

你有太多的exact path 道具。只选择一条路线放入。通常是您要先渲染的路线

标签： javascript node.js reactjs react-router-dom

【解决方案1】：

发生这种情况的原因是react-router-dom 不知道/login 不是commentid

将您的路线包装在 switch

从 react-router-dom 导入

import { Route, Switch } from 'react-router-dom';

并将您的路线包裹在其中，并确保重新排序您的路线，因为

<Switch>
    <Route exact path='/login' component={Demo}/>
    <Route exact path='/:commentid' component={CommentDetalList}/>
    <Route exact path='/' component={CommentList}/>
</Switch>

这样，一旦到达/login，它就不会显示/:commentid，因为开关将显示的路线限制为1

【讨论】：

谢谢它的工作，但你能详细告诉我为什么我必须重新订购它

【解决方案2】：

您应该使用Switch 而不是div 来包装路由设置。我建议你按照下面提到的路线。

import { Route, Switch } from 'react-router-dom';
.
.
.
const BaseRouter = () =>(
  <Switch>
    <Route exact path='/comments' component={CommentList}/>
    <Route exact path='/comments/:commentid' component={CommentDetalList}/>
    <Route exact path='/login' component={Demo}/>
  </Switch>
)

export default BaseRouter;

当用户导航到/ 时，您可以重定向到您的登录组件。

【讨论】：