0

我有一个 react-router v4 和路由转换的简单示例。它遵循https://reacttraining.com/react-router/web/example/animated-transitions中显示的示例。然而，结果是只显示了最后一条路线。其他只是空白。https://codesandbox.io/s/r0PvB30wk。

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, 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 BasicExample = () => (
  <Router>
    <Route render={({ location }) => (
      <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={300}
          transitionLeaveTimeout={300}
          transitionName="fade"
        >
          <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} />
        </CSSTransitionGroup>
      </div>
    )}/>
  </Router>
);

render(<BasicExample />, document.body);
4

2 回答 2

2

对于任何有兴趣的人，我可以让它工作的唯一方法是使用<switch>来自 react-router 的。

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 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)
于 2017-07-05T08:40:46.803 回答
1

你必须像代码一样编写标签，否则它们就会消失……所以你<Switch>说呢？:)

于 2017-07-17T16:59:02.830 回答