React-router re-render on URL change with route using regex

Question

I have an App like this:

function App() {
return (
    <Router>
        <OpNavbar/>
        <Route exact={true} path="/" render={() => (
            <h1>This is the welcome page!</h1>
        )}/>
        <Route path="/([a-z]{3,4})/([a-z]+)list" component={OpTable}/>
    </Router>
    );
}

If I am in "/" and switch paths by clicking a link to for example "/pfm/examplelist" and viceversa it renders the respective component without any problem. However if I am in say "/pfm/examplelist" and switch to "/pfm/anotherlist" the url changes but my component will not be re-rendered. I assume it's because both the old and the new paths match my regex? How can re-render my component on every url change?

Here is a stripped-down version of my Table component:

function OpTable(props) {
    const [apiData, setData] = useState([]);
    const [columns, setColumns] = useState([{dataField: "Dummy", text: "Loading, Please Wait..."}]);

    useEffect(() => {
        axios.get(props.match.url)
        .then(response => {
            let res_data = response.data;
            setData(res_data.data);
            setColumns(res_data.columns);
        })
        .catch(error => {
            console.log(error);
        })
    }, [])

    return (
        <BootstrapTable
            keyField="id"
            data={ apiData }
            columns={ columns }
        />
    );
}

Dipesh KC · Accepted Answer · 2020-02-04 15:54:03Z

1

This is the case when subsequent url calls same component.If you want to rerender,one of the way is to track your path(url) in useEffect.

 useEffect(() => {
        axios.get(props.match.url)
        .then(response => {
            let res_data = response.data;
            setData(res_data.data);
            setColumns(res_data.columns);
        })
        .catch(error => {
            console.log(error);
        })
    }, [props.location.pathname])

I am not a regular user of hooks(I may be wrong with the syntax). But the logic is to call api(whenever there is change in url) required for that component which in turn sets state and rerender happen

answered Feb 4, 2020 at 15:54

Dipesh KC

2,4631 gold badge19 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dvj Over a year ago

Thank you Dipesh, this solved my problem. I am aware of the "dependencies" argument to the useEffect hook, however I hadn't include the location as one because I thought the <Route/> would destroy the previous <OpTable/> and create a new one (So I would be creating a new state)? Am I misunderstanding something?

Dipesh KC Over a year ago

Glad it was helpful:)Answer to your confusion is: If <Route/> would destroy the previous <OpTable/> and create a new one, rerender would occur by itself (with your previous code itself).But the fact is since you are recalling same component again, React wont unmount the component thus no need to mount again(so your useEffect without dependencies was not called before as it is called only during first mount)

Dipesh KC Over a year ago

So we need to pass pathname(or any other logic) as a dependency to rerender the component even if it is a same component.Hope this helped:)

Collectives™ on Stack Overflow

React-router re-render on URL change with route using regex

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related