title: How can i set delay function in react routing?
body: <p>How can I set a delay function on React.js? Is there any way to add or remove class in react routing so that page could be transition? Add, remove or toggle class should work every time. Is it possible to add, remove or toggle class on routing with a delay function? or can I use a third party library for that?</p>
  <pre><code> import React from &quot;react&quot;;
      import { BrowserRouter as Router, Route, Link } from &quot;react-router-dom&quot;;
      
      const BasicExample = () =&gt; (
        &lt;Router&gt;
          &lt;div&gt;
            &lt;ul&gt;
              &lt;li&gt;
                &lt;Link to=&quot;/&quot;&gt;Home&lt;/Link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;Link to=&quot;/about&quot;&gt;About&lt;/Link&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;Link to=&quot;/topics&quot;&gt;Topics&lt;/Link&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
      
            &lt;hr /&gt;
      
            &lt;Route exact path=&quot;/&quot; component={Home} /&gt;
            &lt;Route path=&quot;/about&quot; component={About} /&gt;
            &lt;Route path=&quot;/topics&quot; component={Topics} /&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      );
      
      const Home = () =&gt; (
        &lt;div&gt;
          &lt;h2&gt;Home&lt;/h2&gt;
        &lt;/div&gt;
      );
      
      const About = () =&gt; (
        &lt;div&gt;
          &lt;h2&gt;About&lt;/h2&gt;
        &lt;/div&gt;
      );
      
      const Topics = ({ match }) =&gt; (
        &lt;div&gt;
          &lt;h2&gt;Topics&lt;/h2&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;Link to={`${match.url}/rendering`}&gt;Rendering with React&lt;/Link&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;Link to={`${match.url}/components`}&gt;Components&lt;/Link&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;Link to={`${match.url}/props-v-state`}&gt;Props v. State&lt;/Link&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
      
          &lt;Route path={`${match.url}/:topicId`} component={Topic} /&gt;
          &lt;Route
            exact
            path={match.url}
            render={() =&gt; &lt;h3&gt;Please select a topic.&lt;/h3&gt;}
          /&gt;
        &lt;/div&gt;
      );
      
      const Topic = ({ match }) =&gt; (
        &lt;div&gt;
          &lt;h3&gt;{match.params.topicId}&lt;/h3&gt;
        &lt;/div&gt;
      );
      
      export default BasicExample;
  </code></pre>