Question 302399 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to set up react router dom on react vite

I am working on a ReactJS project and need to set up custom paths for my routes. I want to define my own paths instead of relying on the default routes generated by React Router. What is the best way to achieve this in a React application?

Here’s a simplified version of my current project structure:

/src
  /components
    Home.js
    About.js
  /pages
    HomePage.js
    AboutPage.js
  App.js
  index.js
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Step 1 :

    npm install react-router-dom

    Step 2 : insert this code on app.jsx

    <BrowserRouter>
  <Routes>
    <Route path="/" element={<Test/>} />
  </Routes>
</BrowserRouter>

  2. 0

    1 단계 :

    npm install react-router-dom

    Login or Signup to reply.
  3. 0

    In order to implement routes to your React app you will need to install react-router-dom which will handle the route definition for your application

    If you are looking for a general guide on what would be the best idea for creating routes, I would recommend viewing the react-router-dom documentation here

    From here you can decide what router would work best for the intent of your app and implement from there. Generally speaking, most devs implement <BrowserRouter> to use full URLs within your app. Here is an excerpt from the documentation

    Web Projects We recommend all web projects use createBrowserRouter.

    It uses the full URL instead of the hash urls (#this/stuff) common in
    web apps before history.pushState was standardized. Full URLs are
    better for SEO, better for server rendering, and are just more
    compatible with the rest of the web platform.

    If you’re hosting your app on a static file server, you’ll need to
    configure it to send all requests to your index.html to avoid getting
    404s.

    If for some reason you can’t use the full URL, createHashRouter is the
    next best thing.

    If you’re not interested in the data APIs, you can continue to use
    or, if you can’t use full URLs, .

    I believe this is as far as I can help you without a more directed approach into what exactly you are looking for. Hope this helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search