Home > AI > Frontend > react-router-dom >

Route render

It can add go back and forward functions

Example:

components/AddressBar.js

import {Route} from 'react-router-dom'



export const AddressBar = () => {
    return (
      <Route render={(
        { 
            location: { pathname }, 
            history: { goBack, goForward } 
        }) => (
        <div className="address-bar">
            <a onClick={goBack}>&#x25c0;︎</a> <a onClick={goForward}>&#x25b6;</a>
            <div className="url">URL: {pathname}</div>
        </div>
      )}/>
    );
  };

Other codes, check this post: https://www.jobyme88.com/?st_ai=navlink

Leave a Reply