Error using id for user url?

Question

typescript

Error on line 50 ( <Route path={"/profile/" + user._id}>):
Property '_id' does not exist on type '{}'

import React from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
import {menu, menuHeader} from './data.js';
import { useDispatch } from 'react-redux';
import { setPlaylistsAction } from './redux/actions/action';
import axios from 'axios';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import Header from './components/Header';
import Playlist from './pages/Playlist';
import Signup from './pages/Signup';
import Signin from './pages/Signin';
import Profile from './pages/Profile';

const App: React.FC = () => {
  const dispatch = useDispatch();
  const [playlists, setPlaylists] = React.useState([]);
  const [user, setUser] = React.useState({});

  React.useEffect(() => {
    async function getData(url: string) {
      const {data} = await axios.get(url);
      setPlaylists(data);
      dispatch(setPlaylistsAction(data));
    }
    getData('http://localhost:3000/api/playlists');
  }, [dispatch]);

  React.useEffect(() => {
    async function getData(url: string) {
      const {data} = await axios.get(url);
      setUser(data);
    }
    getData('/api/current_user');
  }, []);
  
  return (
    <div className="app">
      <div className="container">
        <BrowserRouter>
          <Navbar menu={menu} />
          <div className="app__content">
            <Header menu={menuHeader} />
            <main className="app__content-main">
              <Switch>
                <>
                  <Route exact path="/" component={Home} />
                  <Route path="/signup" component={Signup} />
                  <Route path="/signin" component={Signin} />
                  <Route path={"/profile/" + user._id}>
                    <Profile user={user} />
                  </Route>
                  {
                    playlists.map((playlist: any, index: any) => {
                      return (
                        <Route key={index} exact path={"/playlist/" + playlist._id}>
                          <Playlist
                            name={playlist.name}
                            author={playlist.author}
                            music={playlist.music}
                            photo={playlist.photo}
                          />
                        </Route>
                      )
                    })
                  }
                </>
              </Switch>
            </main>
          </div>
        </BrowserRouter>
      </div>
    </div>
  );
}

export default App;

I wrote the interface, but I don't know where to insert it to make it work

Answer 1

interface User {
  _id: number;
}

const [user, setUser] = React.useState<User>({ _id: /* ... */ });