[bug]: Custom route components do not render

[JeffBaumgardt]

What version of React Router are you using?

v6 - beta.5

Steps to Reproduce

I have a Routes that has two routes, / and /test. However the test route is in a custom component that returns a route based on external state.

const SwitchRoute = ({path, a, b}: SwitchRouteProps) => {
  const someExternalStateBool = true
  console.log('Should be rendering here!!!!')
  
  if (someExternalStateBool) {
    return <Route path={path} element={a} />
  } else {
    return <Route path={path} element={b} />
  }
}


export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<span>root</span>} />
        <SwitchRoute path="/test" a={<span>A</span>} b={<span>B</span>} />
      </Routes>
    </BrowserRouter>
  );
}

This was working in beta.0 I have not tested the versions in between to find the changed version yet.

https://codesandbox.io/s/keen-snyder-npoeq?file=/src/App.tsx:181-716

Expected Behavior

I would expect the SwitchRoute to render and return a route.

Actual Behavior

In this case the SwitchRoute isn't even being rendered. The console.log is not ran and the component does not show up in the tree.

I use custom routes like this and authenticated routes where auth is checked before the route is processed further.

[JeffBaumgardt]

I just tried each version of the beta's. It was working up to version 3. It is now broken in v4 +

[ryanflorence]

Routes are statically analyzed for their props, but not actually rendered so your routes up there w/o a <Routes> around them don't do anything. The fact this worked before was relying on an implementation detail.

You can get the same effect by using normal components instead of Routes. Since Route doesn't get any props passed to it in v6 (data comes from hooks) I think this gets you to your goal:

const SwitchElement = ({ a, b }) => {
  const someExternalStateBool = true;
  if (someExternalStateBool) {
    return a;
  } else {
    return b;
  }
};

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<span>root</span>} />
        <Route
          path="/test"
          element={<SwitchElement a={<span>A</span>} b={<span>B</span>} />}
        />
      </Routes>
    </BrowserRouter>
  );
}