Why don't routes work in react?

Question

React

I can’t understand, the routes themselves initially work, but as soon as I start to implement my structure in them, the routes themselves work, but the page is shown the same.

The code

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { GET , DEL , EDIT} from '../constants/Api'


import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

/**
     * Компонент приложения, который отвечает за отрисовку данных с сервера
     * @component
     * @function {component , id} del - Тип отпрвляемого запроса
       * @param {object} component - Объект компонента, 
            который передается в запрос, для последующего обновления.
       * @param {string} id - Идентификатор элемента.
     */

function TaskItem(that) {
  return <div>
                      <span className='task__title'>
                        Задача №{ that.item.id }
                      </span>
                      <span className='task__discr'>
                        { that.item.title }
                      </span>
                      <div className='task__btn-block'>
                        <button className='task__item-del'
                          onClick={
                            that.component.del.bind(
                              that.component,
                              that.item.id
                            )
                          }
                        > 
                        </button>
                        <button className='task__item-edit'
                          onClick={
                            that.component.edit.bind(
                              that.component,
                              that.item.id,
                              that.item.title
                            )
                          }
                        >  
                        </button>
                       </div> 
                    </div>;
}

export default class Api extends Component {
  constructor() {
    super(...arguments);
    
    const {
      store
    } = this.props
    this.state = {
      data: ''
    }
    this.unsubscribe = store.subscribe(() => {
      this.setState(store.getState());
    });

  }
  componentDidMount() {
    
    const {
      store
    } = this.props
    const {
      setApi
    } = this.props

    store.dispatch({
      type: GET,
      data: {
        'store':store,
        'Component' : this
      }
    })
    
  }

  del(id , component) {
    
    this.props.store.dispatch({
      type: DEL,
      data: {
        'Component' : this ,
        'id': id
      }
    })
  }

  edit(id , title , component ) {
    let newTitle = prompt("Напишите новое описание задачи", title);
    this.props.store.dispatch({
      type: EDIT,
      data: {
        'Component' : this ,
        'title': newTitle,
        'id': id
      }
    })
  }

  render() {
    if(this.state.data.length == undefined){
      return <div className='overlay'>
        <div className='lds-ripple'>
          <div></div>
          <div></div>
        </div>
      </div>
    }else if (this.state.data.length == 0){
        return <div>Нет данных</div>
    }else {
      return <Router>
          <Switch>
            <Route path="/">
              {
                    this.state.data.map(item => 
                      <Link className='task__item' 
                            to={ "/task/" + item.id }
                      >
                        <TaskItem item={item} component={this}/>
                      </Link>  
                    )
                  } 
            </Route>
            <Route path="/task/:id">
              Topics 
              <Link to="/">На главную</Link>
            </Route>
          </Switch>
      </Router>
    }  
  }
}

Answer 1

Because the "/" route fires before "/task/:id". Swap them and the problem will go away. The React router greedily selects all routes that match the mask. The "/" route is the least specific, so it will always work.
In order to avoid such a problem, it is necessary to arrange routes from more specific to less specific, for example "/a/b" -> "/a" -> "/".
You can also add the "exact" attribute to your routes. Then the router will choose an exact match, not an occurrence.