Как разделить Маршрутизатор и Навбар, чтобы компонент Навбар не включал компоненты

Question

Я создаю веб-сайт портфолио, где в этом дизайне у меня есть фон для всего веб-сайта, который будет оставаться фиксированным, пока контент просматривает его.Навбар также исправлен и имеет прокрутку контента под ним.

Этот дизайн выглядит круто, и его было не сложно собрать, но у меня возникли небольшие проблемы с включением React Routing в этот микс.

Из того, что я понял, в учебниках говорится о создании компонента App-Router, который в основном похож на их способ сказать "Navbar".Таким образом, я сделал это и заставил свой Navbar перенаправить на страницу Home и обо мне.Однако, поскольку мой Navbar исправлен, все страницы отказываются прокручивать, что означает, что они включены в компонент Navbar.Это противоположно тому, что я хочу, чтобы это произошло.

Моей идеальной настройкой было бы, чтобы панель навигации (это собственный компонент) отправляла запрос на маршрутизацию в компонент маршрутизации, который затем отображает этот компонент (ниже).Navbar, все еще содержащийся в контейнере приложения, который содержит фон).

Вот некоторый псевдо-код моей структуры (плохой код):

App.js

    <div className="App">
        <Navigation />
        {/* <other components to render here /> */}
    </div>

App.css

     background-image: url(blah);
     background-attachment: fixed;
     z-index: -1;

Navigation.js

    <Router>
        <div className="App-navigation">
            <Container>
                <Row>
                    <Link to="/">Home</Link>
                    <Link to="/About">About Me</Link>
                </Row>
            </Container>

            <Route path="/" exact component={Home} />
            <Route path="/About" component={About} />
        </div>
    </Router>

Navigation.css

    .App-navigation {
        // blah blah
        position: fixed;
        z-index: 10;
    }

About.js и Home.js просто имеют соответствующее содержимое страницы.

С учетом вышеизложенного, хотя Home имеет больше содержимого, чем высота страницы,очевидно, фиксированная позиция вмещающей навигационной панели предотвращает прокрутку.

Я довольно новичок в React, поэтому я не уверен в правильной процедуре настройки компонента маршрутизации приложения или где он должен вписываться в приложениеархитектура.Любая помощь или руководство приветствуется!

Answer 1

Вам просто нужно немного изменить структуру, чтобы маршруты / представления / компоненты отображались вне компонента Navigation. Переместите Router, чтобы обернуть большинство, если не все дочерние элементы App. Удалите элементы Route из Navigation, так как Route - это место, где будет отображаться содержимое каждого маршрута / вида / компонента. Переместите удаленные элементы Route к другому компоненту за пределами Navigation и внутри Router.

.

App:

<div className="App">
  <Router>
    <Navigation />
    <Main /> {/* component for rendered components */}
  </Router>
</div>

Навигация:

<div className="App-navigation">
  <Container>
    <Row>
      <Link to="/">Home</Link>
      <Link to="/About">About Me</Link>
    </Row>
  </Container>
</div>

Main:

<div className="App-main">
  <Container>
    <Route path="/" exact component={Home} />
    <Route path="/About" component={About} />
  </Container>
</div>

Вот пример в действии.

Надеюсь, это поможет!

Answer 2

Два быстрых решения.

1 # Создайте только 2 компонента в своем маршрутизаторе: приложение / портфолио и PageNot Found. Ленивые компоненты загрузки, которые вы не хотите загружать немедленно. Нравится О компоненте. Единственным недостатком является то, что URL не изменится, если вы после него.

2 # Просто импортируйте компонент Navbar на каждую другую страницу / компонент или используйте шаблон HOC, который в основном даст тот же результат.