Can you make a global route just for specific URLs? React Router

I’m trying to set a global route so that the component renders across specific URLs. For example, I want the component <Main /> to be rendered in the components <Dashboard /> , <Clients /> , <AddClient /> , <EditClient /> . But apart from all these, I want a new component <Landing /> which I want the full page on blank without rendering the <Main /> component there but I don’t know how to do the routings so that I can accomplish this.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App'
import Main from './main.js'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Dashboard from './dashboard.js'
import Clients from './Clients.js'
import AddClient from './clientform.js'
import EditClient from './editclient.js'
import Landing from './landing.js'

ReactDOM.render(
  <React.StrictMode>
      
      <Router>
      <Route exact path="/">
        <Landing /> {/* This shouldn't render the <Main /> component but it does */}
        </Route>
      <Main />
      <Switch> 
        <Route exact path="/dashboard">
        <Dashboard />
        </Route>
        <Route exact path="/Clients">
        <Clients />
        </Route>
        <Route exact path="/addClient">
          <AddClient />
        </Route>
        <Route exact path="/Clients/:id">
          <EditClient />
        </Route>
      </Switch>
      </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.