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')
);