React Router - 路由器和交换机有什么区别？

Question

我试图理解在 React Router 中使用 Router 和 Switch 之间的区别。

但我不明白为什么在下面的示例中使用Switch有效：

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

ReactDOM.render(
  <React.StrictMode>
     <BrowserRouter>
        <Switch>
            <Route exact path="/" component={App} />
            <Route path="/item" component={SocialMediaShare} />
        </Switch>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

但是使用Router会抛出错误：

import { BrowserRouter, Route, Router } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
     <BrowserRouter>
        <Router>
            <Route exact path="/" component={App} />
            <Route path="/item" component={SocialMediaShare} />
        </Router>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')

Answer 1

除了答案之外，还应该注意的是，从react-router-dom v6开始，<Switch />已被替换为<Routes />.

Answer 2

React-router-dom 中的组件主要分为三类

这里的问题是您正在使用react-router-dom<Router>中的组件，并且没有传递所有必需的道具，在这种情况下就像历史记录

如果您想使用<Router>组件，请使用以下代码之一。

import { Router, browserHistory } from "react-router";
<Router history={browserHistory} routes={componentRoutes}></Router>

或者

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { BrowserRouter as Router, Route } from 'react-router-dom'
    import App from './components/App';
    ReactDOM.render((
       <Router>
           <Route path="/" component={App}/>
       </Router>
    ),
     document.getElementById('root')
   );

交换机和路由器的区别

Switch 组件的工作方式与 Router 组件大致相同，这意味着我们仍然会有需要精确路径的嵌套 Route 组件

Switch 的附加功能是它只会渲染第一个匹配的子项。当我们有如下所示的嵌套路由时，这非常方便：

<Switch>
  <Route path="/accounts/new" component={AddForm} />
  <Route path={`/accounts/:accountId`} component={Profile} />
</Switch>

欲了解更多详情，请点击这里

Answer 3

Switch 将渲染一条且仅一条匹配的路线。实际上，即使存在其他匹配路由，也会呈现第一个匹配项。路线没那么挑剔。它将渲染所有匹配的路线。您可以使用 router 的确切参数来进一步确定它，但如果您的 SPA 仅渲染一个组件来响应每条路由，请使用 Switch。如果您需要多个具有公共路由前缀的组件，请使用 Router。这里有这些差异的示例： https://medium.com/@jenniferdobak/react-router-vs-switch-components-2af3a9fc72e。