Блог

Я пытаюсь создать веб-сайт в react и использую router-dom для отображения правильного URL-адреса.

У меня есть панель навигации, которая ссылается на страницу о программе, используя ссылку на=»», а затем с помощью переключателя и маршрута для отображения компонента для правильного пути, но это не работает.

Не уверен, что я что-то пропустил здесь, но мне не удается отобразить какие-либо компоненты.

Это мой держатель страницы

 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 , но не были в a Route . Я удалил их перед загрузкой сюда, но забыл их в своем коде

У вас есть два отдельных <BrowserRouter /> компонента, каждый из которых имеет свое собственное состояние. Я предлагаю вам переместить <BrowserRouter /> компонент к общему предку обоих <Navbar /> , <PageContainer /> чтобы они могли совместно использовать один и тот же объект истории.

Например, удалите BrowserRouter из ваших компонентов и поместите его выше в иерархии компонентов. Теперь оба <Navbar /> и <PageContainer /> находятся в сфере одного и того же <BrowserRouter />

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

Попробуйте добавить BrowserRouter в 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">
        <PageContainer />
        <Navbar />
      </section>
    </BrowserRouter>
  );
}

export default App;