React-роутер повторно рендерится при изменении URL с маршрутом, используя регулярное выражение

Question

У меня есть приложение, подобное этому:

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>
    );
}

Если я нахожусь в "/" и переключаю пути, нажимая ссылку, например, на "/ pfm / examplelist" и наоборот, оно отображает соответствующий компонент без любая проблема. Однако если я скажу "/ pfm / examplelist" и переключусь на "/ pfm / anotherlist", URL-адрес изменится, но мой компонент не будет перерисован. Я предполагаю, что это потому, что и старый, и новый пути соответствуют моему регулярному выражению? Как можно перерисовывать мой компонент при каждом изменении URL?

Вот урезанная версия моего компонента Table:

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 }
        />
    );
}

Answer 1

Это тот случай, когда последующие URL-адреса вызывают один и тот же компонент. Если вы хотите выполнить повторный рендеринг, одним из способов является отслеживание вашего пути (URL-адреса) в 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])

Я не обычный пользователь хуков (я могу ошибаться с синтаксисом). Но логика c заключается в вызове API (когда происходит изменение в URL), необходимом для этого компонента, который, в свою очередь, устанавливает состояние и происходит повторное отображение