[Docs]: index.js about react-router

[kingram6865]

Thank you for providing those extra details.

[timdorr]

We have several migration guides. The one you're looking for is here: https://reactrouter.com/en/main/upgrading/v6-data

[kingram6865]

We have several migration guides. The one you're looking for is here: https://reactrouter.com/en/main/upgrading/v6-data

It doesn't address the specific question I had. Which of your docs addresses my specific question about index.js?

[kiliman]

Hmm.. since the migration guide uses this example as the current app, I think it's pretty self-explanatory.

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/blog/*" element={<BlogApp />} />
        <Route path="/users/*" element={<UserApp />} />
      </Routes>
    </BrowserRouter>
  );
}

The <App> component includes <BrowserRoter> already, so your existing app should just change the render to:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

NOTE: You probably want to change this to ReactDOM.createRoot() for React v18+.

In fact, you can even see this in the basic data router example (https://github.com/remix-run/react-router/blob/dev/examples/basic-data-router/src/main.tsx)

import * as React from "react";
import * as ReactDOM from "react-dom/client";
import App from "./app";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);