时间戳

首页 > 解决方案 > 反应路由器交换机没有显示任何东西

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

问题描述

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

我有一个导航栏，它使用 Link to="" 链接到关于页面，然后使用 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>
    );
  }
}

更新：

应用程序.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. 我在上传之前已经删除了它们，但在我的代码中忘记了它们

标签： javascriptreactjsreact-router-dom

解决方案

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

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

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

推荐阅读