10

I am using "react-router-dom": "6.0.2" in React 17. And i am using typescript. I am tried to add route. But getting error

Uncaught Error: [ProxyFacade] is not a component. All component children of must be a or <React.Fragment>

And i don't know what was the issue.Is anything i missed.

App.tsx

import * as React from "react";
import "./index.less";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { hot } from "react-hot-loader";
import SignIn from "../sign-in";
import SignUp from "../sign-up";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<SignIn />} />
        <Route path="/signup" element={<SignUp />} />
      </Routes>
    </BrowserRouter>
  );
};
declare let module: Record<string, unknown>;

export default hot(module)(App);

sign-in/index.tsx

import * as React from "react";
const SignIn = () => {
  return (
    <React.Fragment>
      <div>
        <p>Sign In</p>
      </div>
    </React.Fragment>
  );
};

export default SignIn;

sign-up/index.tsx

import * as React from "react";
const SignUp = () => {
  return (
    <React.Fragment>
      <div>
        <p>Sign In</p>
      </div>
    </React.Fragment>
  );
};

export default SignUp;
Natheeshkumar Rangasamy
  • 687
  • 9
  • 27

1 Answers1

5

It might have something to do with the react hot loader. The hot loader wraps everything with proxies[hence the [ProxyFacade] in the error]. And probably the React router code looks at the type of the function(component) to verify if the Routes has any children other than Route component. See the issue here.

You can try first without the hot reloader to see if you still face the issue. If you don't then you can fix the react hot loader issue as mentioned in the link I added above.

akshay sehgal
  • 88
  • 4