CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-router-dom
Husnain Ahmad
Husnain Ahmad

Reputation: 35

getting two components when calling one

router.js code is here

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;

So The problem is When i go http://localhost:3000/1 i get the view from id 1 id but when i go to http://localhost:3000/login i get the view from id1 also and the login page but as you can see democode or login.js code i am returning only login page i want to get the only login page when i go to http://localhost:3000/login

Upvotes: 0

Views: 44

Answers (2)

Anglesvar
Anglesvar

Reputation: 1154

You should use Switch and not div to wrap the route setup. And I would suggest you to have your route as mentioned below.

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;

and you can redirect to your login component when the user navigates to /.

Upvotes: 0

Shmili Breuer
Shmili Breuer

Reputation: 4147

The reason this is happening is because react-router-dom doesn't know that /login isn't a commentid

Wrap your routes in a switch

Import it from react-router-dom

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

And wrap your routes in it and also make sure to reorder your routes because

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

This way once it hits /login it won't show /:commentid cause the switch limits the routes shown to 1

Upvotes: 1

Related Questions