Проблемы с навигацией - PullRequest
Новая
       26

Проблемы с навигацией

0 голосов
/ 01 июня 2019

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

import React, { useContext } from "react";
import { createBrowserHistory } from "history";
import { Router, Route, Switch, __RouterContext } from "react-router-dom";
import { useTransition, animated } from "react-spring";

import "assets/scss/material-kit-react.scss?v=1.4.0";

// pages for this product
import LandingPage from "views/LandingPage/LandingPage.jsx";
import ProfilePage from "views/ProfilePage/ProfilePage.jsx";

var hist = createBrowserHistory();
const App = () => {
  const { location } = useContext(__RouterContext);

  const transitions = useTransition(location, location => location.pathname, {
    from: { opacity: 0, transform: "translate(100%,0)" },
    enter: { opacity: 1, transform: "translate(0%,0)" },
    leave: { opacity: 0, transform: "translate(-50%,0)" }
  });

  return (
    <>
      {transitions.map(({ item, props, key }) => (
        <animated.div key={key} style={props}>
          <Router history={hist}>
            <Switch location={item}>
              <Route path="/profile-page" component={ProfilePage} />
              <Route path="/" component={LandingPage} />
            </Switch>
          </Router>
        </animated.div>
      ))}
    </>
  );
};

export default App;

Так устроен мой NavLink 

<Link
          exact
          to="/profile-page"
          className={classes.link}
          activeClassName="active"
        >

1 Ответ

0 голосов
/ 02 июня 2019

Я пытался воссоздать вашу проблему. Я думаю, что ваша проблема может быть в том, что вы используете Router как снаружи, так и внутри приложения. Потому что useContext не будет работать без внешнего маршрутизатора. Таким образом, решение состоит в том, чтобы удалить маршрутизатор из рендеринга приложения. Вот мой полный рабочий пример: 

import React, { useContext } from 'react';
import { createBrowserHistory } from 'history';
import {
  Route,
  Switch,
  Link,
  __RouterContext,
  BrowserRouter
} from 'react-router-dom';
import { useTransition, animated } from 'react-spring';
import ReactDOM from 'react-dom';

function App() {
  return (
    <BrowserRouter>
      <Home />
    </BrowserRouter>
  );
}
// pages for this product
const LandingPage = () => {
  return (
    <div>
      <h1>LandingPage</h1>
      <Link to="/profile-page">profile</Link>
    </div>
  );
};
const ProfilePage = () => {
  return (
    <div>
      <h1>Profile</h1>
      <Link to="/">main</Link>
    </div>
  );
};

const Home = () => {
  const { location } = useContext(__RouterContext);

  const transitions = useTransition(location, location => location.pathname, {
    from: {
      position: 'absolute',
      width: '100%',
      opacity: 0,
      transform: 'translate(100%,0)'
    },
    enter: { opacity: 1, transform: 'translate(0%,0)' },
    leave: { opacity: 0, transform: 'translate(-50%,0)' }
  });

  return (
    <>
      {transitions.map(({ item, props, key }) => (
        <animated.div key={key} style={props}>
          <Switch location={item}>
            <Route path="/profile-page" component={ProfilePage} />
            <Route path="/" component={LandingPage} />
          </Switch>
        </animated.div>
      ))}
    </>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

export default App;

Вы можете попробовать это здесь: https://codesandbox.io/s/sleepy-wozniak-b07jp

...