[Docs]: index.js

[kingram6865]

Describe what's incorrect/missing in the documentation

The way I learned react router was this:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom'
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

Your tutorial for React Router v6 does not properly demonstrate how to transition from this to
the new React Router method.

I don't feel like doing trial and error to figure out how this needs to translate.

Please provide some guidance.

[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>
);

[kingram6865]

Thank you for providing those extra details.