How to create stateless routing in react?

Stateless routing in Reactjs: stateless means without state you can not defines any state and if you need any state value then it required that setState() before then you can use state value. which component starts with a class keyword that is called by stateful component. And were we not using class component then it’s a stateless component as below example:

How to write a Stateful component?

export default class Header extends Component{

    

    render(){

        return(

            <>

                Something text

            </>

        );

    }

}

Also you can write:

class Footer extends Component{

    render(){

        return(

            <><!--this is main parent container-->

              Here will be your HTML content

            </>

        )

    }

}

export default Footer;

How to write Stateless component?

const Home = () => {

    return(

        <div>

            <h1>Home</h1>

            <p>Home content will come here when content will add new</p>

        </div>

    )

}

export default Home;

Also you can write:

export default () => {

    return (

        <>

            <p>Text content will come here when content will add new</p>

        </>

    )

}

Here is the stateless routing code in react:

header.js

import React from 'react'

import Navlist from '../header/navlist'

export default () => {

    

    const routes = {

        navlist: [

            {name:'Home', href:'/home'},

            {name:'About Us', href:'/aboutus'},

            {name:'Page Not found', href:'/pagenotfound'}

        ]

    }

   const rendernavlist = () => {

        return routes.navlist.map(item => <Navlist linkName={item.name} linkHref={item.href} /> )

    }

    return (

        <>

            <ul>

                {rendernavlist()}

            </ul>

        </>

    )

}

navlist.js

import React from 'react'

import {Link} from 'react-router-dom'

export default (props) => {

    return(

        <>

            <li>

                <Link to={props.linkHref}>{props.linkName}</Link>

            </li>

        </>

    )

}

Approuter.js

import React from 'react'

import {Switch, Route, Redirect} from 'react-router-dom'

import Home from '../src/view/home/home'

import Aboutus from '../src/view/aboutus/aboutus'

import Pagenotfound from '../src/view/pagenotfound/pagenotfound'

export default () => {

    return(

        <>

            <Switch>

                <Route path='/' exact component={Home} />

                <Route path='/home' component={Home} />

                <Route path='/aboutus' component={Aboutus} />

                <Route path='/pagenotfound' component={Pagenotfound} />

                <Redirect from='/*' to='/pagenotfound' />

            </Switch>

        </>

    )

}

Now in latest version 6+ react router dom change some element as Switch replaced with Routes. And also removed Redirect element. And component replaced with element as below example:

<Routes>

                <Route path='/' exact element={<Home/>} />

                <Route path='/home' element={<Home/>} />

                <Route path='/aboutus' element={<Aboutus/>} />

                <Route path='/pagenotfound' element={<Pagenotfound/>} />

                <Route path='/*' element={<Pagenotfound/>} />

            </Routes>

Index.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

import {BrowserRouter} from 'react-router-dom'

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change

// unregister() to register() below. Note this comes with some pitfalls.

// Learn more about service workers: https://bit.ly/CRA-PWA

serviceWorker.unregister();

App.js

import React from 'react';

import './App.css';

import Header from '../src/components/header/header'

import Approuter from './Approuter';

function App() {

  return (

    <div className="App">

      <Header />

      <Approuter />

    </div>

  );

}

export default App;

For the result you can see below screenshot: