为了账号安全,请及时绑定邮箱和手机立即绑定

反应路由器更改URL但不查看

/ 猿问

反应路由器更改URL但不查看

慕雪6442864 2019-12-05 15:51:43

我在对路由做出反应时无法更改视图。看来我已经尝试了所有可以通过Google尝试的方法,但没有运气。我只想显示一个用户列表,单击每个用户应导航到详细信息页面。这是路由器:


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'))

当我使用url / details时,我的浏览器会导航到该url,但不会更改视图。任何其他路由都会抛出404,因此似乎可以识别该路由但无法更新。


查看完整描述

3 回答

?
冉冉说

您只需要将组件包装在withRouter中。


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

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


...

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;

额外


如果您使用反应路由器,则每当URL更改时都会调用componentWillReceiveProps。


componentWillReceiveProps(nextProps) {

    var currentProductId = nextProps.match.params.productId;

    var nextProductId = nextProps.match.params.productId; // from the new url

    ...

}

注意


或者,您也可以在导出之前将组件包装在withRouter中,但随后必须确保其他一些事项。我通常会跳过此步骤。


export default withRouter(Profile)


查看完整回答
反对 回复 2019-12-05
?
吃鸡游戏

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


import { connect } from 'react-redux'

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


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


查看完整回答
反对 回复 2019-12-05

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信