# React 17 & React Router Dom v6 Example

**URL:** <https://devforum.okta.com/t/react-17-react-router-dom-v6-example/19779>\
**Category:** Questions\
**Created:** [March 11, 2022, 2:51pm UTC](https://devforum.okta.com/t/react-17-react-router-dom-v6-example/19779 "2022-03-11T14:51:55Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mmdevwill](https://avatars.discourse-cdn.com/v4/letter/m/cc9497/32.png) [@mmdevwill](https://devforum.okta.com/u/mmdevwill)\
**Post date:** [March 11, 2022, 2:51pm UTC](https://devforum.okta.com/t/react-17-react-router-dom-v6-example/19779/1 "2022-03-11T14:51:55Z")

</div>

I am trying to setup Okta Integration for a brand new application that we are developing. I have looked through the forums and documentation but it seems to be old.

The new application uses React 17.x and React Router Dom v6

```javascript
const App = () => (
  <Router>
    <Security oktaAuth={OktaConfiguration} restoreOriginalUri={restoreOriginalUri}>
      <ThemeProvider>
        <NavBar />
        <Routes>
          <Route path="/" element={<Search />} />
          <Route path="/upload" element={<Upload />} />
         <Route path="/callback" element={LoginCallback} />
        </Routes>
      </ThemeProvider>
    </Security>
    <div className="h-12" />
    <Footer />
  </Router>
)

ReactDOM.render(
  <div id="new-app">
    <React.StrictMode>
      <App />
    </React.StrictMode>
    <App />
  </div>,
  document.getElementById('root'),
)

```

I have setup a new file OktaConfiguration.ts - but I cannot use useNavigate outside of a component.

```javascript
import { OktaAuth, toRelativeUrl } from '@okta/okta-auth-js';
import { useNavigate } from 'react-router-dom';

const OktaConfiguration = new OktaAuth({
  clientId: '0oafsu8i6zdlN93us357',
  issuer: 'https://midamericamortgage.okta.com',
  redirectUri: `${window.location.origin}/login/callback`,
})

export const restoreOriginalUri = async (_oktaAuth: any, originalUri: any) => {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const navigate = useNavigate()
  navigate(toRelativeUrl(originalUri || '/', window.location.origin))
}

export default OktaConfiguration

```

Any suggestions or examples to follow. I am using functional components with TypeScript so that always leads me down a path that not many people take. Thanks

---

<div class="post-metadata">

**Author:** ![andrea](https://sea1.discourse-cdn.com/oktadev/user_avatar/devforum.okta.com/andrea/32/2172_2.png) [@andrea](https://devforum.okta.com/u/andrea)\
**Post date:** [February 8, 2024, 9:49pm UTC](https://devforum.okta.com/t/react-17-react-router-dom-v6-example/19779/2 "2024-02-08T21:49:24Z")

</div>

Closed on February 8, 2024, 9:49pm UTC