Блог

Извини, новичок в экстремальной реакции. У меня есть простой компонент функции реагирования:

 import React from "react";

export default function Portal() {
    return (
        <h2>Portal</h2>
    );
}
 

В моем App.js У меня есть:

 import React from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import './App.css';
import Portal from "./components/Portal/portal";
import LogoHeader from './components/LogoHeader';
import NewFooter from "./components/NewFooter";

function App() {    
    return (
        <div className="App">
            <BrowserRouter>
                <Switch>
                    <Route path="/portal">
                        <Portal />
                    </Route>                    
                </Switch>
            </BrowserRouter>
            ...
            <LogoHeader />
            ...
            <NewFooter/>
        </div>
    );
}

export default App;
 

В заголовке журнала у меня есть ссылка:

 <a href='/Portal'>Portal</a>
 

Когда я нажимаю на ссылку «Портал», она обновляет страницу, но теперь вверху отображается заголовок «Портал», а затем остальная часть App.js страница. Как мне сделать так, чтобы портал сам по себе представлял собой одну страницу?

Обновить

Основываясь на ответе, данном @DrewReese, я изменил App.js Оказать содействие в:

 return (
    <div className="App">
        <BrowserRouter>
            <p className="greeting">Hello, {token.firstName}</p>
            <LogoHeader />
            <GetCategories />
            <Navbar id="customNav" navItems={navItems} shopCategories={shopCategories} />
            <Switch>                    
                <Route path="/home">
                    <Slideshow id="slideshow" />
                    <div id="productContainer">
                        <br />
                        <h3>Featured Products</h3>
                        <br />
                        <FeaturedCards />
                        <br />
                        <h3>Most Popular</h3>
                        <br />
                        <ProdCard />
                        <br />
                        <h3>New Products</h3>
                        <br />
                        <ProdCard />
                    </div>
                </Route>
                <Route path="/portal">
                    <Portal />
                </Route>                    
            </Switch>
            <NewFooter />
        </BrowserRouter>
    </div>
);
 

Когда вы используете тег привязки ( <a href="...." /> ), он запускает перезагрузку страницы, которая перезагружает ваше приложение React. Вы должны использовать Link компонент для ссылки на страницы в вашем приложении.

Логогидратор

 import { Link } from 'react-router-dom';

...

<Link to='/portal'>Portal</Link>
 

Если вы хотите, чтобы в заголовке отображались отрисованные страницы, переместите его в JSX. Помните, что любые ссылки, которые вы визуализируете, должны отображаться в контексте маршрутизации, поэтому заголовок должен отображаться в BrowserRouter компоненте.

Апп

 function App() {    
  return (
    <div className="App">
      <BrowserRouter>
        <LogoHeader />
        <Switch>
          <Route path="/portal">
            <Portal />
          </Route>                    
        </Switch>
        <NewFooter/>
      </BrowserRouter>
    </div>
  );
}
 

Если вы хотите Portal , чтобы страница отображалась, а заголовок не отображался, вы можете отобразить пользовательский заголовок и условно отобразить LogoHeader его на основе сопоставления маршрутов.

useRouteMatch
Реквизит для спичечного пути

Он возвращает значение null, если указанный путь не соответствует реквизиту пути.

 const Header = () => {
  const match = useRouteMatch("/portal");
  return !match ? <LogoHeader /> : null;
}

function App() {    
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Switch>
          <Route path="/portal">
            <Portal />
          </Route>                    
        </Switch>
        <NewFooter/>
      </BrowserRouter>
    </div>
  );
}
 

Обновить

Внутри Switch компонента порядок и специфичность пути имеют значение. Заказывайте более конкретные пути перед менее конкретными путями. «/портал» более специфичен, чем»/», поэтому его следует отображать раньше. Это связано с тем, что Switch компонент исключительно сопоставляет и отображает маршруты (т. е. только первое найденное совпадение), в отличие Router от компонента, который отображает их включительно (т. е. все совпадения).

 return (
  <div className="App">
    <BrowserRouter>
      <p className="greeting">Hello, {token.firstName}</p>
      <LogoHeader />
      <GetCategories />
      <Navbar id="customNav" navItems={navItems} shopCategories={shopCategories} />
      <Switch>                    
        <Route path="/portal">
          <Portal />
        </Route>
        <Route path="/">
          <Slideshow id="slideshow" />
          <div id="productContainer">
            <br />
            <h3>Featured Products</h3>
            <br />
            <FeaturedCards />
            <br />
            <h3>Most Popular</h3>
            <br />
            <ProdCard />
            <br />
            <h3>New Products</h3>
            <br />
            <ProdCard />
          </div>
         </Route>          
      </Switch>
      <NewFooter />
    </BrowserRouter>
  </div>
);
 

Я полагаю, вам просто нужно использовать <Link to="/portal"> здесь react-маршрутизатор.

 import { Link } from 'react-router-dom' (v4 of react-router)
import { Link } from 'react-router' (v3 of react-router)
 

Есть 2 проблемы с использованием тега:

1. он действительно содержит относительные URL-адреса (в данном конкретном случае это не будет проблемой, но на некоторых страницах это сбивает вас с толку).
2. это запускает обновление страницы

Более подробная информация об использовании ссылки https://reactrouter.com/web/guides/quick-start