反应路由器交换机没有显示任何东西

Question

我正在尝试在 react 中创建一个网站，并正在使用 router-dom 来显示正确的 url。

我有一个导航栏，它使用 Link to="" 链接到 about 页面，然后使用 Switch 和 Route 显示正确路径的组件，但它不起作用。

不确定我是否在这里遗漏了任何内容，但我无法显示任何组件。

这是我的 PageContainer

import React from "react";
import { Route, Switch } from "react-router-dom";

import Alphabet from "./Alphabet";
import About from "./About";


export default class PageContainer extends React.Component {
  render() {
    return (
        <section className="pagecontainer">
          <Switch>

            <Route exact path="/omoss">
              <About />
            </Route>
            <Route exact path="/">
              <Alphabet />
            </Route>
          </Switch>
        </section>
    );
  }
}

这是我的导航栏

import React from "react";
import { Link } from "react-router-dom";

export default class Navbar extends React.Component {
  render() {
    return (
        <section>
          <section className="navbar">
            <Link to="/">Hem</Link>
            <Link to="/omoss">OM OSS</Link>
          </section>
        </section>
    );
  }
}

更新：

• 从上述两个组件中删除了BrowserRouter。
• 将 App.js 更改为以下内容。

App.js

import React from "react";
import "./App.css";

import { BrowserRouter } from "react-router-dom";

import Navbar from "./components/Navbar";
import PageContainer from "./components/PageContainer";

function App() {
  return (
    <BrowserRouter>
      <section className="App">
        <Navbar />
        <PageContainer />
      </section>
    </BrowserRouter>
  );
}

export default App;

仍然无法正常工作。 url 发生变化，但组件不显示。

更新 2

当我删除了在Switch 中显示在PageContainer 中但不在Route 中的其他两个组件时，我想我解决了这个问题。我在上传之前已经删除了它们，但在我的代码中忘记了它们

Answer 1

您有两个单独的<BrowserRouter /> 组件，每个组件都有自己的状态。我建议您将<BrowserRouter /> 组件移动到<Navbar /> 和<PageContainer /> 的共同祖先，以便它们可以共享相同的历史对象。

例如，从组件中删除 BrowserRouter 并将其放置在组件层次结构中的较高位置。现在，<Navbar /> 和<PageContainer /> 都在同一个<BrowserRouter /> 的范围内

function App() {
  return (
     <BrowserRouter>
        <Navbar />
        <PageContainer />
     </BrowserRouter>
  );
}

Answer 2

尝试在App.js中添加BrowserRouter

import React from "react";
import "./App.css";
import { BrowserRouter } from "react-router-dom";

import Navbar from "./components/Navbar";
import PageContainer from "./components/PageContainer";

function App() {
  return (
    <BrowserRouter>
      <section className="App">
        <PageContainer />
        <Navbar />
      </section>
    </BrowserRouter>
  );
}

export default App;