Router location navigator typescript, react

Question

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)

ClusterH · Accepted Answer · 2022-11-24T17:48:37.120

1

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>,
)

edited Nov 24 '22 at 17:48

answered Nov 24 '22 at 17:10

ClusterH

761
3
16

i did import { BrowserRouter as Router} from "react-router-dom"; when I use `location={location}` i have do define `location`. Therefore i used it in a wrong way. but i got the solution of it - thx – Spluli Nov 24 '22 at 17:19
Yes, All good, @Spluli – ClusterH Nov 24 '22 at 17:22
now i get this error `Uncaught Error: useLocation() may be used only in the context of a component.` – Spluli Nov 24 '22 at 17:38
2

Updated answer, @Spluli, it is because you are trying to use `useLocation` outside of `BrowserRouter`, useLocation should be used inside of it. You may need to Wrap `App` with `BrowserRouter` since you are using `useLocation` in the `App`'s body – ClusterH Nov 24 '22 at 17:50
I see my issue: i just had to change `import { Router } from 'react-router-dom';` to `import { BrowserRouter as Router } from 'react-router-dom';` thx :) – Spluli Nov 24 '22 at 18:01
The principle is simple, if you know it. You are welcome! @Spluli XD – ClusterH Nov 24 '22 at 18:04

score 1 · Answer 2 · answered Nov 24 '22 at 17:10

1

file extension for typescript should be .tsx, not js.
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();

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;

answered Nov 24 '22 at 17:10

Raziel

1,448
2
17
35

i have tsx, :) just did a mistake by writing. got the Router as you do – Spluli Nov 24 '22 at 17:20
now i get this error `Uncaught Error: useLocation() may be used only in the context of a component.` – Spluli Nov 24 '22 at 17:38
I see my issue: i just had to change import { Router } from 'react-router-dom'; to import { BrowserRouter as Router } from 'react-router-dom'; – Spluli Nov 24 '22 at 18:08

Router location navigator typescript, react

2 Answers2