4

我正在寻找一种方法来“美观地”更新 React/Redux/React-Router/React-Router-Redux 应用程序地址栏中的路由，而不会在路由更改时实际导致组件重新挂载。

我正在使用 React CSS Transition Groups 为输入路线设置动画。所以当用户从

/home/

到

/home/profile/bob,

动画触发。

但是，一旦打开/home/profile/bob，用户可以向左/向右滑动以访问其他配置文件 -/home/profile/joe等等。

我希望地址栏中的 URL 在发生这种情况时更新，但目前这会导致profile组件重新挂载，这会重新触发 CSS 转换组，从而触发动画——我只希望在去的时候触发该动画从非配置文件路由到配置文件路由，而不是在配置文件路由之间切换时。

我希望这是有道理的。我本质上是在寻找一种方法来“美观地”更新应用程序 URL，而不强制重新安装管理该路由的组件。

4

2 回答 2

1

如果您使用的是 react 路由器，它会在您更改 url 时挂载/卸载。这是正常的行为。页面之间的转换也是一样的，你只能声明和进/出转换，而不知道你来自哪个url路径:(

于 2016-06-01T22:54:31.030 回答
0

我试图实现你所说的。在“子路由”之间移动时，我可以阻止整页转换，但我无法触发子路由的特定转换（由于父路由重新渲染）。这是我想出的https://codesandbox.io/s/Dkwyg654k。

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import { CSSTransitionGroup } from 'react-transition-group';

import About  from './components/About';
import Home   from './components/Home';
import Topics from './components/Topics';

import './styles.css';

var currentRoute = ''

const getParentPathname = pathname => 
  pathname === '/'
    ? ''
    : (/([a-zA-Z])([^/]*)/).exec(pathname)[0]

class BasicExample extends Component {
  render = () =>
    <Router>
      <Route
        render={({ location, history, match }) => {

          const nextRoute = getParentPathname(location.pathname)
          const isParentRouteChange = 
                !currentRoute.includes(nextRoute) || 
                !nextRoute.includes(currentRoute)
          currentRoute = nextRoute

          return(
            <div>
              <ul>
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                  <Link to="/about">About</Link>
                </li>
                <li>
                  <Link to="/topics">Topics</Link>
                </li>
              </ul>

              <hr />
              <CSSTransitionGroup
//                 transitionEnter={isParentRouteChange}
//                 transitionLeave={isParentRouteChange}
                transitionEnterTimeout={500}
                transitionLeaveTimeout={500}
                transitionName={isParentRouteChange ? "fade" : "slide"}
              >
                <Switch key={location.key} location={location}>
                  <Route exact path="/"       component={Home}   location={location} key={location.key}/>
                  <Route       path="/about"  component={About}  location={location} key={location.key}/>
                  <Route       path="/topics" component={Topics} location={location} key={location.key}/>
                </Switch>
              </CSSTransitionGroup>
            </div> 
          )

        }
      }/>
    </Router>

}

render(<BasicExample />, document.body)
于 2017-07-11T07:00:14.473 回答