反應路由器v4＆CSS轉換組

Question

我有一個簡單的例子，反應路由器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); 

Answer 1

任何有興趣，我可以得到這個工作的唯一辦法是從反應路由器使用<switch>。

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) 

Answer 2

你必須寫代碼等標籤，否則它們會消失...所以你要<Switch>？ :)