I use TS and now i have to put stuff in my Router and I don't know what.

index.js:

import { Router, useLocation } from "react-router-dom";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

const location = useLocation()
root.render(
  <React.StrictMode>
    <Router location={????????} navigator={?????????} >
      <App />
    </Router>
  </React.StrictMode>
);
reportWebVitals();

App.js:

function App() {
  return (
    <>
        <Navbar />
        <Routes >
          <Route path="/"                           element={<Home           />} />
          <Route path="Portfolio/:portfolioId"      element={<SingleShooting />} />
           ...
        </Routes>
      
    </>
  );
}

WHat do I have to put in?

Type '{ children: Element; }' is missing the following properties from type 'RouterProps': location, navigatorts(2739)

(I want to do this, because of this: Animate Presence exit not working framer motion)

CodePudding user response：

According to React-Router official docs, you should avoid using Router directly. Instead, use BrowserRouter or StaticRouter(server rendering) And also, As you are going to do Animate Presence exit not working framer motion, You may need to use Routes instead of Switch in case you are using React-Router-Dom v6.

<Routes location={location} key={location.pathname}>
    // Your routes in here
    <Route path="/"                           element={<Home           />} />
    <Route path="Portfolio/:portfolioId"      element={<SingleShooting />} />
</Routes>

Edit to fix your commit

In your index.tsx

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <React.StrictMode>
     <BrowserRouter>
        <App />
     </BrowserRouter>
  </React.StrictMode>,
)

CodePudding user response：

1. file extension for typescript should be .tsx, not js.

2. Remove location and router from index.tsx so leave it as its original file:

    const root = ReactDOM.createRoot(
      document.getElementById('root') as HTMLElement,
    );
    root.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
    );
    
    reportWebVitals();

3. Router setup should be like so:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={< Home />} />
        <Route path="Portfolio/:portfolioId" element={< SingleShooting />} />
      </Routes>
    </Router>
  );
}

export default App;