Should I be using functions instead of classes for pages in ReactJS?

user_1224963 0
Viewed 90

I've noticed React Router DOM (v6) is now using functions in their help guides in regards to pages instead of using classes.

Previously used classes like so:

export class Login extends React.Component {
    render() {
        return <p>test</p>
    }
}

However, after trying the latest version of React Router DOM I would receive an empty page for the navigation route.

import {Login} from "./js/components/Auth/Login";


function App() {
    return <h2>Test</h2>
}

if (document.getElementById('app')) {
    ReactDOM.render(
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<App />} />
                <Route path="/login" component={() => <Login />} />
            </Routes>
        </BrowserRouter>, document.getElementById('app'))
}

App works fine ('/' route), but /login returns an empty page with no error..

Login refers to a class that uses render() and returns <p>test</p>

Am I doing something incorrectly? Are libraries leaning towards functions instead of class components?

This guide seems to be only using functions for components.

https://reactrouter.com/docs/en/v6/getting-started/tutorial

react-router-dom reactjs javascript
1 Answers

Class vs Function components is irrelevant in RRDv6, they simply render React components specified as JSX, not as a reference to a component, and not as a function returning JSX. There is also no render or component props, the Route components now use only element to render the route components.

<Routes>
  <Route path="/" element={<App />} />
  <Route path="/login" element={<Login />} />
</Routes>
user_86908570
Related