reactjs - 你可以为特定的 URL 创建一个全局路由吗？反应路由器

Question

我正在尝试设置全局路由，以便组件跨特定 URL 呈现。比如我想让组件<Main />在 components <Dashboard />, <Clients />, <AddClient />,中渲染<EditClient />。但除了所有这些之外，我想要一个新组件<Landing />，我希望整个页面空白而不在那里渲染<Main />组件，但我不知道如何进行路由以便我可以完成此操作。

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

标签： reactjsreact-router