React Router URL 有效但组件无效

Posted 2023-02-21

【中文标题】React Router URL 有效但组件无效

【英文标题】：React Router URL works but not Component

【发布时间】：2021-04-07 09:25:01

【问题描述】：

React Router 更改了 URL，但组件没有更新。我检查了 *** 的许多解决方案，但仍然没有用。 这是我的代码： App.js：

function App() 
  return (
        <div className="App">
                <Header />
                <Sidebar />
          <Switch>
              <Route exact path='/' component=withRouter(Dashboard) />
              <Route path='/invoices/:objectId' component=withRouter(Table) />
          </Switch>
        </div>
  );


export default App;

侧边导航：

    function Sidebar()

    return(
        <div className="sidebar-wrapper">
            <div className="sidenav">
                <NavLink to='/'>Dashboard</NavLink>
                <NavLink to='/invoices/1'>Test1</NavLink>
                <NavLink to='/invoices/2'>Test2</NavLink>
                <NavLink to='/invoices/3'>Test3</NavLink>
            </div>
        </div>
    );

export default Sidebar;

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import  BrowserRouter  from "react-router-dom";
import './static/index.css';
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>,
  document.getElementById('root')
);

我对 React 并不陌生，并且愿意对我的代码进行任何其他改进。

【问题讨论】：

这似乎是两条路线上的相同组件（您没有显示）。

是的，首先它没有参数，并且按预期为空。但是当我尝试跳过其他人时，它不会重新加载组件。编辑：更改它以消除任何混乱。

【参考方案1】：

您的组件已经包装在 Route... /> 组件中，为什么还要将它们包装在 withRoute 中？ 我认为没有理由这样做。

请阅读this。

【讨论】：

感谢您的建议。我阅读了文档并删除了用法。

【参考方案2】：

其他路线只需传递exact 道具

<Switch>
  <Route exact path='/' component=withRouter(Dashboard) />
  <Route exact path='/invoices/:objectId' component=withRouter(Table) />
</Switch>

【讨论】：

我试过了。它加载仪表板，然后加载我单击的第一个 NavLink。然后当我单击其他 NavLink 时不会更改。但是当我点击仪表板时，它又可以工作了。

@HürkanDoğan 您的问题与 React-Router 无关。这与您实现 Table 组件的方式有关，当 :objectId 更改时不会重新渲染

【参考方案3】：

我从另一篇与此问题相关的帖子中找到了针对我的情况的解决方案： Component does not remount when route parameters change

    useEffect(() => 
            retrieveInvoices();
        , [props.match.params.objectId]);

我已将 props 作为依赖项传递到我的表组件中，现在每次更改 URL 参数时它都会重新加载我的数据。其他帖子中提供了其他更好的处理方式。