still working with react-router@4?

[axetroy]

hello i am trying use this with react-router@4

but it don't work as expect.

package.json still dep on react-router@2, got any plan to make it compatible with v4?

[maisano]

@axetroy there's no reason it wouldn't be compatible, i just haven't gotten around to updating package.json to reflect this. feel free to pr :)

[micha149]

@axetroy if you use the dynamic routing version, where you can put <Route> elements some where in your other components, you have to do some black magic:

const SomeRoutedComponent = ({ location }) => (
    <div>
        <Route path="/path/to/your/house">
            {({ match }) => (
                <RouteTransition
                        atEnter={{ opacity: 0 }}
                        atLeave={{ opacity: 0 }}
                        atActive={{ opacity: 1 }}
                        pathname={location.pathname}>
                    {match && <ComponentToRender />}
                </RouteTransition>
            )}
        </Route>
    </div>
);

As described in the docs, the <Route> component accepts a function in the children property which is evaluated whether the route matches or not. A passed match object contains the matching information if the route matched, or null if the route did not match.

[maisano]

@micha149 have you noticed any performance issues with this approach?

[micha149]

We are just starting a new project. It's currently a very small app with 3 routes and a few components… For now, I have no performance issues. What are your considerations?

[axetroy]

@maisano

I don't known what 's wrong with this. it will trigger componentDidMount many times.

if I wanna init the data in componentDidMount with http request. that is so bad for sending 5 request.

[maisano]

@axetroy can i see what your route/components look like? some more context here would help :)

[axetroy]

@maisano

thanks you for anwser.

Here are my route

class App extends Component {
  render() {
    return (
      <RouteTransition pathname={this.props.location.pathname}
                       atEnter={{translateX: 2000}}
                       atLeave={{opacity: 0, translateX: -2000}}
                       atActive={{opacity: 1, translateX: 0}}
                       mapStyles={styles => ({transform: `translateX(${styles.translateX}%)`})}
                       runOnMount={true}
      >
        <div style={{position: 'absolute', width: '100%'}}>
          <div style={{position: 'relative'}}>
            <Switch>
              <Route exact path="/" component={ Home }/>
              <Route path="/message" component={ Message }/>
              <Route exact path="/memo" component={Memo}/>
              <Route path="/memo/:id" component={MemoDetail}/>
              <Route path="/about" component={ About }/>
              <Route path="/login" component={ Login }/>
              <Route path="/register" component={ Register }/>
              <Route exact path="/new" component={ News }/>
              <Route exact path="/new/search" component={ NewsSearch }/>
              <Route exact path="/new/search/:key" component={ SearchResult }/>
              <Route exact path="/new/:id" component={ NewsDetail }/>
              <Route exact path="/product" component={ Product }/>
              <Route exact path="/asset" component={ Assets }/>
              <Route path="/asset/:id" component={ Card }/>
              <Route path="/achievement" component={ Achievement }/>
              <Route exact path="/auth" component={ Authentication }/>
              <Route component={NotFound}/>
            </Switch>
          </div>
        </div>
      </RouteTransition>
    );
  }
}

export default App;

ReactDOM.render(
  <Provider store={store}>
    <Router history={process.env.NODE_ENV === 'development' ? createBrowserHistory() : createHashHistory()}>
      <Route component={App}/>
    </Router>
  </Provider>,
  document.getElementById('app')
);

[maisano]

@axetroy i don't think you really want to use a Switch inside of the RouteTransition–that's very likely the cause of your excessive mounting & unmounting.

[maisano]

@axetroy if you pass in the parent's location prop to the Switch, things should work okay. there's a new example in the readme.