Javascript 调用一个组件时获取两个组件

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;

      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;

从“React”导入React；
从'react router dom'导入{Route}；
从“/containers/commentview”导入CommentList；
从“/containers/commentdetailview”导入CommentDetailList；
从“./containers/Login”导入演示
const BaseRouter=（）=>(
)
导出默认BaseRouter；

login.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;

      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;

从“React”导入React；
从“antd”导入{表单、输入、按钮、复选框}；
常量布局={
labelCol：{
跨度：8，
},
包装纸：{
跨度：16，
},
};
const tailLayout={
包装纸：{
抵销：8，
跨度：16，
},
};
常量演示=（）=>{
返回(
记得我吗
提交
);
};
导出默认演示；

---

所以问题是我什么时候去http://localhost:3000/1 我从id 1 id获取视图，但当我转到http://localhost:3000/login 我也可以从id1和登录页面获得视图，但正如您看到的democode或login.js代码一样，我只返回登录页面，我想在进入时获得唯一的登录页面http://localhost:3000/login

发生这种情况的原因是

react路由器dom

不知道

/login

不是

commentid

将您的路线包装在

交换机中

从路由器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

您应该使用

开关

而不是

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;

从'react router dom'导入{Route，Switch}；
.
.
.
const BaseRouter=（）=>(
)
导出默认BaseRouter；

---

当用户导航到

/

时，您可以重定向到登录组件，因为您有太多的

确切路径

道具。只选择一条路线将其放入。通常情况下，你想提供的第一个感谢它的工作，但你能告诉我详细的原因，我必须重新排序吗