How to send slug in Detail in React

JavaScript
1

I can’t show my slug in Detail.

  1. PostList
import React, { Component } from 'react';
import { Link } from 'react-router-dom';


class PostList extends Component {
    state = {
        todos: []
    };

    async componentDidMount() {
        try {
            const res = await fetch('http://127.0.0.1:8000/api/posts/');
            const todos = await res.json();
            this.setState({
                todos
            });
        } catch (e) {
            console.log(e);
        }
    }

    render() {
        return (
            <div>
            {this.state.todos.map(item => (
                <Link to={`posts/${item.slug}`} >
                <div key={item.slug}>
                <h1>{item.title}</h1>
                <span>{item.text}</span>
                </div>
                </Link>
            ))}
            </div>
        );
    }
}

export default PostList;

2)PostDetail

import React, { Component } from 'react';


class PostDetail extends Component {
    state = {
        todos: []
    };

    async componentDidMount() {
	const { slug } = this.props.match.params;
        try {
            const res = await fetch('http://127.0.0.1:8000/api/post/' + slug) ;
            const todos = await res.json();
            this.setState({
                todos
            });
        } catch (e) {
            console.log(e);
        }
    }

    render() {
        return (
            <div>
            <p>Hah</p>
            </div>
        );
    }
}

export default PostDetail;
  1. App.js
    return (
        <Router>
        <Switch>
        <Route exact path="/" component={PostList} />
        <Route path=":slug" component={PostDetail} />
        </Switch>
        </Router>
    );