Достигнуть маршрутизатора меняет URL, не обновляет представление - PullRequest
Новая
       10

Достигнуть маршрутизатора меняет URL, не обновляет представление

0 голосов
/ 11 января 2020

Использование <Link to="/projects/some-project-slug" /> действительно меняет URL в браузере, но приложение не меняет его отображение.

Вот приложение: 

import React from 'react';
import { Router } from "@reach/router"

import HeaderNavItems from '../../constants/header-nav-items';

import Header from '../header/header';
import Footer from '../footer/footer';

import AboutView from '../../views/about/about-view';
import NotFoundView from '../../views/not-found/not-found-view';
import ProjectDetailsView from '../../views/project-details/projects-details-view';
import ProjectsIndexView from '../../views/projects-index/projects-index-view';

import config from '../../config.json';


import './app.scss';


const App = () => {
  const { common } = config;

  // component
  return <div className="app">
    <Header
      heading={ common.heading }
      subheading={ common.subheading }
      navItems={ HeaderNavItems }
    />
    <Router>
      <ProjectsIndexView path='/' />
      <ProjectsIndexView path='/projects' />
      <ProjectDetailsView path='/projects/:projectSlug' />
      <AboutView path='/about' />
      <NotFoundView default />
    </Router>
    <Footer
      heading={ common.heading }
      subheading={ common.subheading }
    />
  </div>
};

export default App;

А вот компонент содержит <Link/> (который создается в <ProjectsIndexView/>): 

import React from 'react';
import { Link } from '@reach/router';

import themeModel from '../../models/ThemeModel';

import './project-teaser.scss';


const ProjectTeaser = (props) => {
  const render = () => (
    <Link
      className={ `project-teaser ${themeModel.current}` }
      to={ props.href }
    >
      <img
        className="image"
        src={ props.imageSource }
        alt=""
      />
      <div className="project-name">
        { props.name }
      </div>
    </Link>
  );

  return render();
}

export default ProjectTeaser;

URL-адрес в props.href правильный. Если я обновлю sh браузер по URL-адресу, на который перенаправлен, то будет работать только представление. Я пытаюсь убедиться, что НЕ требуется страница refre sh.

Мне нужно, чтобы и /, и /projects использовали один и тот же компонент, так как я не хочу, чтобы посетители добавлялись к <NotFound/> на случай, если они go на /projects напрямую.

Эта проблема показалась похожей, однако они вызывают перенаправление в коде, тогда как я использую <Link/>.

Будем благодарны за любые указания и уважительные ответы.

ОБНОВЛЕНИЕ

Компонент <ProjectTeaser/> определен во внешней библиотеке. Есть 3-4 проекта, использующих этот компонент. Ради интереса я попытался скопировать определение компонента в тот же проект, который его использует, а это означало, что он больше не был импортирован из внешней библиотеки.

И теперь маршрутизация работает.

Может кто-нибудь объясните мне, как это происходит? Это тот же код! Просто расположены в разных проектах. Единственное отличие, которое я вижу, состоит в том, что версия библиотеки предварительно скомпилирована.

Однако, если это работает, как ожидает библиотека @ reach / router, это очень неудобно, так как я пытаюсь избежать копирования <ProjectTeaser/> определение в каждом проекте, который нуждается в этом.

1 Ответ

0 голосов
/ 11 января 2020

Так что технически вам не хватает <Switch> и <Route> для каждого случая. <Link> создает привязки для вашего приложения, URL перенаправления, но не обрабатывает изменения маршрута самостоятельно. Чтобы изменить представление в соответствии с URL-адресом, необходимо добавить один <Switch> и для всех маршрутов компоненты <Route> внутри <Router>.

Как показано ниже: 

<Router>
   <Switch>
      <Route path="/">
         <ProjectsIndexView path='/' />
      </Route>
      <Route path="/projects">
         <ProjectsIndexView path='/projects' />
      </Route>
      { /* all the other */ }
   </Switch>
</Router>

<Switch>

Подробнее читайте здесь: https://reacttraining.com/react-router/web/guides/quick-start

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

...