App.js but with add Routes in App ;)

App.js

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "react-notifications/lib/notifications.css";
import { NotificationContainer } from "react-notifications";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { Provider } from "react-redux";
import ReduxThunk from "redux-thunk";

import Homescreen from "./Screens/Homescreen/Homescreen"; //              |
import PagenotFound from "./Screens/PageNotFound/PagenotFound"; //        |
import ForgotPassword from "./Screens/ForgotPassword/ForgotPassword"; //  |
import UserActions from "./Screens/UserActions/UserActions"; //           |
import Upload from "./Screens/Upload/Uplaod"; //                          | Some screens with dummy data (FOR NOW)
import WatchScreen from "./Screens/WatchScreen/WatchScreen"; //           |
import SearchScreen from "./Screens/SearchScreen/SearchScreen"; //        |
import Subscriptions from "./Screens/subscriptions/subscriptions"; //     |
import ChannelScreen from "./Screens/channelScreen/ChannelScreen"; //     |
import EditVideo from "./Screens/EditVideoScreen/EditVideo"; //           |

import VideosReducer from "./Store/reducers/Videos"; // Import all Reducers
import AuthReducer from "./Store/reducers/Auth";

const RootReducer = combineReducers({
  Vidoes: VideosReducer,
  auth: AuthReducer,
});

const store = createStore(RootReducer, applyMiddleware(ReduxThunk));

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <Router>
          <Routes>
            <Route
              path="/"
              element={
                <Layout>
                  <Homescreen />
                </Layout>
              }
            />
            <Route path="/login" element={<Login />} />
            <Route
              path="/search/:query"
              element={
                <Layout>
                  <SearchScreen />
                </Layout>
              }
            />
            <Route path="/forgot-password" element={<ForgotPassword />} />
            <Route path="/UserActions" element={<UserActions />} />
            <Route
              path="/Upload"
              element={
                <Layout>
                  <Upload />
                </Layout>
              }
            />
            <Route
              path="/watch/:id"
              element={
                <Layout>
                  <WatchScreen />
                </Layout>
              }
            />
            <Route
              path="/channel/:channelId"
              element={
                <Layout>
                  <ChannelScreen />
                </Layout>
              }
            />
            <Route
              path="/EditVideo/:id"
              element={
                <Layout>
                  <EditVideo />
                </Layout>
              }
            />
            <Route
              path="/feed/subscriptions"
              element={
                <Layout>
                  <Subscriptions />
                </Layout>
              }
            />
            <Route path="*" element={<PagenotFound />} />
          </Routes>
        </Router>
        <NotificationContainer />
      </div>
    </Provider>
  );
}

export default App;