导航问题

Question

我有这个路由器动画在页面加载上工作，但是当我使用导航栏导航时，它会更改网址，但页面不会更改或需要很长时间才能更改。

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;

这就是我的导航链接的结构

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

Answer 1

我试图重现你的问题。我认为您的问题可能是，您在应用程序外部和内部也使用路由器。因为没有外部路由器，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