Блог

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 здесь находится демонстрационный код

       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 я получаю представление из идентификатора 1 id, но когда я перехожу к http://localhost:3000/login я также получаю представление из id1 и страницу входа в систему, но, как вы можете видеть, демокод или login.js код, который я возвращаю, — единственная страница входа. я хочу получить единственную страницу входа, когда я перехожу на http://localhost:3000/login

Причина, по которой это происходит, заключается в том, что 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

Вы должны использовать 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;

  

и вы можете перенаправить на свой компонент входа, когда пользователь переходит к / .