1. Router.js 아래와 같이 변경

(user / * ) 뒤에 오는 *은 그 이후에 다른 것이 붙을 수도 있다는 것을 의미해줍니다.

import React from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Hosting from './pages/Hosting';
import User from './pages/User';

function Router() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/*" element={<User />} />
        <Route path="/hosting" element={<Hosting />} />
      </Routes>
    </BrowserRouter>
  );
}

export default Router;

1. <User /> 컴포넌트 만든 후 그 안에 Router 넣어줌

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Nav from '../components/Nav/Nav';
import LoginSignup from '../components/Nav/Modal/LoginSignup';
import Main from './Main';
import Staydetail from './Staydetail';
import Staylist from './Staylist';
import Footer from './../components/Footer';

const Customer = () => {
  return (
    <>
      <Nav />
      <LoginSignup />
      <Routes>
        <Route path="/" element={<Main />} />
        <Route path="/staylist" element={<Staylist />} />
        <Route path="/staydetail" element={<Staydetail />} />
      </Routes>
      <Footer />
    </>
  );
};

export default Customer;

리액트 공식문서 참고! 🙂

React Router