Problem with using react-router-dom version 6

[mehmetyilmaz001]

Hi,

I have just wanted to implement with react-router-dom 6.2.1 and go an error like this

Error: [Authenticator] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

My code is

import { Callback, makeAuthenticator } from "react-oidc";
import userManager from "./oidc_config";
import { Route, BrowserRouter as Router, Routes } from "react-router-dom";
import history from "./history";
import RouteList from './RouteList';

const AppWithAuth = makeAuthenticator({
  userManager: userManager,
  signinArgs: { state: window.location.href },
})(RouteList);

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route
            path="/signin-oidc"
            element={() => (
              <Callback
                onSuccess={(_) => {
                  history.push("/");
                }}
                userManager={userManager}
              />
            )}
          />
          <AppWithAuth />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

package.json

{
  "name": "react-oidc-sample",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^17.0.20",
    "@types/react-dom": "^17.0.9",
    "oidc-client": "^1.11.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-oidc": "^1.0.3",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 
```1 safari version"
    ]
  }
}


Thanks

[GrumpyGoslin]

I got this working by using the <Outlet /> is r6

const MainApp: FC = () => {
  return (
    <>
      <div>header</div>
      <Outlet />
    </>
  );
};

const Application = makeAuthenticator({
  userManager: user,
})(MainApp)

<BrowserRouter>
     <Routes>
         <Route
                path='/callback'
                element={
                  <Callback
                    onSuccess={() => ....}
                    onError={(e) => {
                      console.error(e);
                    }}
                    userManager={user}
                  />
                }
              /> 
          <Route element={<Application />}>
                <Route path="/" element={<Landing />} />
                <Route path="/path1" element={<Component1 />} />
                <Route path="/path2" element={<Component2 />} />
           </Route>
   </Routes>
</BrowserRouter>