Не могу понять, сами роуты изначально работают, но как только я начинаю внедрять свою структуру в них, сами роуты срабатывают, но страница показывается та же самая.
Код
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>
}
}
}
