App:
const App = (props) => {
    return (
        <BrowserRouter>
            <div className='app-wrapper'>
                <Header/>
                <div className='app-wrapper-content'>
                    <Route path='/accounts' component={Accounts}/>
                    <Route path={'/account:id'} component={Account}/>
                    <Route path='/new' component={AccountForm}/>
                </div>
            </div>
        </BrowserRouter>
    );
};


Account:
class Account extends Component {
    constructor(props) {
        super(props);

        this.state = {
            id: this.props.match.params.id,
            name: '',
            email: '',
            password: '',
            link: ''
        }

    }

    componentDidMount() {

        console.log(this.state.id)

        // eslint-disable-next-line
        if (this.state.id === -1) {
            return
        }

        ApiService.fetchAccountById(this.state.id)
            .then(response => this.setState({
                item: {
                    name: response.data.name,
                    email: response.data.email,
                    password: response.data.password,
                    link: response.data.link
                }
            }))

    }

    render() {

        let acc = this.state.item;

        return (
            <div>
                <h3>Account</h3>
                <div>{acc.id}</div>
                <div>{acc.name}</div>
                <div>{acc.email}</div>
                <div>{acc.password}</div>
                <div>{acc.link}</div>
            </div>
        )
    }


ApiService:

const ACCOUNT_API_BASE_URL = 'http://localhost:8080/api/accounts';

class ApiService {
    fetchAccounts() {
        return axios.get(ACCOUNT_API_BASE_URL);
    }

    fetchAccountById(id) {
        return axios.get(`${ACCOUNT_API_BASE_URL}/${id}`);
    }

    addAccount(acc) {
        return axios.post(ACCOUNT_API_BASE_URL + '/create', acc);
    }

}