当我将反应路由器应用于我的应用程序时，它停止显示所有内容答案

【问题标题】：When I apply react router to my app, it stops showing all the content当我将反应路由器应用于我的应用程序时，它停止显示所有内容
【发布时间】：2022-10-15 16:10:54
【问题描述】：

我正在尝试使用反应路由器创建应用程序，但是当我尝试应用反应路由器时，它会立即停止显示所有内容。我正在使用 V5，所以 Switch 应该可以工作，但它没有

这是代码：

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

export default function App() {
  return (
    <>
     <Router>
         <Switch>
        <Route exact path="/">
        <Main />
        </Route>
        <Route exact path="/form">
          <Form />
        </Route>
        </Switch>
      </Router>
    </>
);

【问题讨论】：

标签： reactjs

【解决方案1】：

您已经设置了路线，但没有渲染任何组件。

使用React Router V6，只需在每个Route 上的element 属性内实例化一个React 组件：

...
export default function App() {
  return (
    <>
     <Router>
         <Switch>
            <Route exact path="/" element={<Home />} />
            <Route exact path="/form" element={<Form />} />
        </Switch>
      </Router>
    </>
);

如果您还没有，我建议将每条路线封装到自己的组件中，以使这更容易。

【讨论】：

使用“元素”属性对我来说反应路由器 V6 的伎俩，但正确的路由声明看起来像 <Route ... path="your path" element={<Your Component/>} />。

【解决方案2】：

您需要首先转到index.js 或main.jsx 文件并使用BrowserRouter> 组件包装您的App 组件。

 <BrowserRouter>
    <App />
 </BrowserRouter>

或者您可以在此处创建路线，如下例所示

<BrowserRouter>
  <Routes>
    <Route path="/" element={<App />} />
    <Route path="compOne" element={<Component1 />} />
    <Route path="compTwo" element={<Component2 />} />
  </Routes>
</BrowserRouter>

现在您可以通过使用Navlink 或Link 组件来使用路由。

【讨论】：

请求者已经在使用 <Router/>，根据文档，这是一个有效的路由器。

【解决方案3】：

我用来使它与反应路由器 V6 一起工作的路由声明看起来像

<Route path="/yourpath" element={<YourComponent/>} />

所以不应该有任何结束标签 </Route>

【讨论】：

【解决方案4】：

确保将您的应用程序包装在 BrowserRouter 中，这是最可能的原因。

【讨论】：