React路由器更改URL但不查看

Question

我在更改视图以响应路由时遇到问题.似乎我已经尝试了所有我可以谷歌没有运气.我只想显示用户列表,点击每个用户应导航到详细信息页面.这是路由器:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from 'react-router-dom';
import Users from "./components/Users";
import { Router, Route } from "react-router";
import Details from "./components/Details";

ReactDOM.render((
  <BrowserRouter>
    <div>
        <Route path="/" component={Users} />
        <Route path="/details" component={Details} />
    </div>
  </BrowserRouter>
), document.getElementById('app'))

当我使用网址/详细信息时,我的浏览器会导航到该网址,但不会更改视图.任何其他路线抛出404所以它似乎识别路线但不更新.

Answer 1

您需要exact为indexRoute 指定属性,否则对于偶数/details路径,它仍将匹配/.也尝试导入Route从react-router-dom

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from 'react-router-dom';
import Users from "./components/Users";

import Details from "./components/Details";

ReactDOM.render((
  <BrowserRouter>
    <div>
        <Route exact path="/" component={Users} />
        <Route path="/details" component={Details} />
    </div>
  </BrowserRouter>
), document.getElementById('app'))

更新:

您需要做的另一件事是将组件User附加到withRouter.withRouter只有在组件没有收到时才需要使用Router props,

如果您的组件是由路由器呈现的组件的嵌套子级,或者您没有将Router支持传递给它,或者组件根本没有链接到路由器并且从组件呈现为单独的组件,则可能会发生这种情况.路线.

在Users.js中添加

import {withRouter} from 'react-router';

.........
export default withRouter(Users)

DOCS

Answer 2

React Router v5 不适用于 React 18 StrictMode https://github.com/remix-run/react-router/issues/7870

Answer 3

我遇到了同样的问题，发现这是因为我有一个嵌套的路由器。一旦我删除了嵌套的路由器，并简单地将我的特定于组件的路由放在一个交换机组件中——问题就得到了解决，而无需使用 withRouter 或进行任何额外的更改。

<Router> // <--Remove nested Router
    <Switch>
      <Route exact path="/workflows" component={ViewWorkflows} />
      <Route path="/workflows/new" component={NewWorkflow} />
    </Switch>
</Router>

Yusufbek 正在描述一个类似的问题。我认为将与组件相关的路由存储在视图级别比将它们全部存储在一个主路由器中要干净得多。在生产应用程序中，这将是太多的路线，无法轻松阅读和调试问题。

Answer 4

我遇到了同样的问题，但我修复了它。我把主页放在最后。这个对我有用。就像下面一样。

    import React from "react";
    import ReactDOM from "react-dom";
    import { BrowserRouter } from 'react-router-dom';
    import Users from "./components/Users";
    import { Router, Route } from "react-router";
    import Details from "./components/Details";

    ReactDOM.render((
      <BrowserRouter>
        <div>
            <Route path="/details" component={Details} />
            <Route path="/" component={Users} />
        </div>
      </BrowserRouter>
    ), document.getElementById('app'))

Answer 5

您只需将组件包装在withRouter中即可.

<Route exact path ="/ mypath"component = { withRouter(MyComponent)} />

这是一个示例App.js文件:

<Route exact path="/mypath" component={withRouter(MyComponent)} />

要么

您也可以在导出之前将组件包装在withRouter中,但是您必须确保其他一些事情.

...
import { BrowserRouter as Router, Route, Switch, withRouter } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";

class App extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={withRouter(Home)} />
          <Route exact path="/profile" component={withRouter(Profile)} />
        </Switch>
      </Router>
    );
  }
}

export default App;

Answer 6

我有一个类似的问题，但结构不同。我添加了一个可以处理所有路由的路由器，我使用了 Switch 组件来切换视图。但实际上，并没有。仅更改 URL，但未查看。原因是在侧栏组件内部使用的链接组件位于路由器组件外部。（是的，我已经用“withRouter”导出了侧边栏，没有工作）。因此，解决方案是将包含所有 Link 组件的 SideBar 组件移动到我的路由器中。

问题出在我的链接器上，它们在我的路由器之外

<div className="_wrapper">
  <SideBar /> // Holds my all linkers
  <Router>
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/users" component={Users} />
     </Switch>
  </Router>
 </div>

解决方案是将我的链接器移到我的路由器中

<div className="_wrapper">
  <Router>
     <SideBar /> // Holds my all linkers
     <Switch>
       <Route path="/" component={Home} />
       <Route path="/users" component={Users} />
     </Switch>
  </Router>
</div>

Answer 7

根据此问题， react-router-dom 与 React 18 不兼容，因为 BrowserRouter 是 StrictMode 的子级。

所以要解决这个问题。

而不是这个：

<React.StrictMode><BrowserRouter>...</BrowserRouter></React.StrictMode>

做这个：

<BrowserRouter><React.StrictMode>...</React.StrictMode></BrowserRouter>

这种方式对我有用，我希望它有帮助。

Answer 8

BrowserRouter 无法在您的案例中维护历史记录。改用“路由器”，将此与自定义历史记录一起用作道具可能有助于解决您的问题。

import {Router, Route, Switch, withRouter } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";
import {createBrowserHistory} from 'history';

export const customHistory = createBrowserHistory();  //This maintains custom history

class App extends Component {
  render() {
    return (
      <Router history={customHistory}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/profile" component={Profile} />
        </Switch>
      </Router>
    );
  }
}

export default App;

然后在您的组件中，从“App”导入 customHistory 并使用它进行导航。

customHistory.push('/pathname');

希望这有帮助！:)

Answer 9

就我而言，我错误地嵌套了两个BrowserRouters。

Answer 10

当使用Redux时，我遇到类似的问题，其中地址栏中的URL正在更新，但应用程序未加载相应的组件。我能够通过将withRouter添加到导出中来解决：

import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'

export default withRouter(connect(mapStateToProps)(MyComponentName))

Answer 11

我有同样的问题 react-router-dom 5

问题是由history包引起的。我使用的版本是5.0.0但它们不能一起工作。

在降级固定history到4.10.1

相关问题：https : //github.com/ReactTraining/history/issues/804

Answer 12

你需要精确添加到索引路线而非封闭的路线由格组件，使用开关从反应路由器-DOM的路线之间切换。

import React from "react";
import ReactDOM from "react-dom";
import { Route, Switch } from 'react-router-dom';
import Users from "./components/Users";

import Details from "./components/Details";

ReactDOM.render((
  <div>
    <Switch>
        <Route path="/" component={Users} exact/>
        <Route path="/details" component={Details} />
    </Switch>
  </div>
), document.getElementById('app'))

Answer 13

我尝试在主路径前面添加“exact”，如下所示

<Route exact path="/" component={Home}></Route>

它运行良好...