当在子路由之间移动时阻止父路由上的路由器转换

  • Z时代
  • 2024-01-10
  • 分类：问答

我已经设置了具有动画转换的路由器。是否有可能仅在子路径上触发转换，而不是在用户从/话题/渲染移动到/话题/组件时转换整个页面。活生生的例子：https://codesandbox.io/s/r0PvB30wk当在子路由之间移动时阻止父路由上的路由器转换

import React 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' 
const Topic = ({ match }) => (
    <div> 
    <h3>{match.params.topicId}</h3> 
    </div> 
); 
const Topics = ({ match }) => (
    <div className="page"> 
    <h2>Topics</h2> 
    <ul> 
     <li> 
     <Link to={`${match.url}/rendering`}> 
      Rendering with React 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/components`}> 
      Components 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/props-v-state`}> 
      Props v. State 
     </Link> 
     </li> 
    </ul> 
    <Route path={`${match.url}/:topicId`} component={Topic} /> 
    <Route 
     exact 
     path={match.url} 
     render={() => <h3>Please select a topic.</h3>} 
    /> 
    </div> 
); 
export default Topics; 
const BasicExample =() => (
    <Router> 
    <Route render={({ location, history, match }) => (
     <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 
      transitionEnterTimeout={500} 
      transitionLeaveTimeout={500} 
      transitionName="fade" 
     > 
      <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)

回答：

我能达到的效果的唯一方法是检测，如果我是从父更改为父母或孩子的孩子的路线，并关闭基于这样的转变。

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 isAnimated = 
       !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> 
       <li> 
        <Link to="/askdjhakshd">Unknown</Link> 
       </li> 
       </ul> 
       <hr /> 
       <CSSTransitionGroup 
       transitionEnter={isAnimated} 
       transitionLeave={isAnimated} 
       transitionEnterTimeout={500} 
       transitionLeaveTimeout={500} 
       transitionName="fade" 
       > 
       {/* switch will render the 1st route that matches */} 
       <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}/> 
        <Route render={props => <p>Unknown Route</p>}/> 
       </Switch> 
       </CSSTransitionGroup> 
      </div> 
     ) 
     } 
     }/> 
    </Router> 
} 
render(<BasicExample />, document.body)

回答：

我带着同样的问题，所以我写了解决这个问题的模块。

https://github.com/melounek/switch-css-transition-group

这SwitchCSSTransitionGroup分量检测是否路由内部真正的切换（基于react-router.matchPath），然后approprietly改变切换键。

所以，你可以更新这个代码片段，它应该工作：

... 
    <SwitchCSSTransitionGroup 
     transitionEnterTimeout={500} 
     transitionLeaveTimeout={500} 
     transitionName="fade" 
     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} /> 
    </SwitchCSSTransitionGroup> 
    ...

以上是 当在子路由之间移动时阻止父路由上的路由器转换 的全部内容， 来源链接： utcz.com/qa/263863.html

回到顶部