reactjs-React路由器更改url但不更改vi

我在更改视图以响应路由时遇到麻烦。 似乎我已经尝试过一切我可以通过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,因此似乎可以识别该路由,但无法更新。

MARyan87 asked 2020-07-12T04:25:02Z
12个解决方案
33 votes

您需要为indexRoute指定属性296269203145962323936,否则,即使对于withRouter路由,它仍将与Router props匹配。 也尝试从react-router-dom导入Route

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

更新:

您需要做的另一件事是为您的组件用户附加2962692031459659623936。仅当您的组件未收到Router props时,才需要使用withRouter

如果您的组件是由Router渲染的组件的嵌套子代,或者您尚未将Router道具传递给它,或者该组件根本没有链接到Router并作为独立于该组件的组件呈现,则可能会发生这种情况 路线。

在Users.js中添加

import {withRouter} from 'react-router';

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

DOCS

Shubham Khatri answered 2020-07-12T04:25:33Z
16 votes

您只需要将组件包装在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;

要么

您也可以在导出之前将组件包装在withRouter中,但随后必须确保其他一些事项。

export default withRouter(Profile)
Coding Elements answered 2020-07-12T04:26:06Z
6 votes

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

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

export default withRouter(connect(mapStateToProps)(MyComponentName))
Bruce Seymour answered 2020-07-12T04:26:27Z
2 votes

我对React Router版本4有类似的问题:

单击2962693664218285085056组件,URL会更改,但视图不会更改。

一种观点是使用2962693664218285085056,而不是Component(从react导入),这就是原因。

通过将所有使用2962693664218285085056的路由渲染组件替换为2962693664218285085057,我的问题得以解决。

(解决方案来源:[https://github.com/ReactTraining/react-router/issues/4975#issuecomment-355393785)]

Kunok answered 2020-07-12T04:27:06Z
2 votes

您需要向索引路由中添加精确的路由,而不是通过div封闭那些Route组件,而使用Switch from react-router-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'))
Vinay J Rao answered 2020-07-12T04:27:27Z
1 votes

嗯,没有任何SWITCH可以实际切换视图。

这就是我使用路由器从登录页面切换到主站点的方式

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


//App.jsx
render()
{
    return <div>
        <Switch>
            <Route exact path='/' component={Lander}/>
            <Route path='/vadatajs' component={Vadatajs}/>
        </Switch>
    </div>
}

[HTTPS://JS fiddle.net/martins_A毙了vs/4接口哦7ARP/11/]

ups我发现您使用其他路由器..对不起,那么这个小提琴对您有用

[HTTPS://fiddle.假设理论.net/胎儿大12/马纳88LM/]

解决方案的关键可能隐藏在主要渲染功能的行中。

Router.run(routes, function(Handler) {
    React.render(<Handler />, document.getElementById('container'));
});
Martin Abilev answered 2020-07-12T04:28:09Z
0 votes

我也遇到麻烦了

PureComponent

并且我尝试了Shubham Khatri提及的解决方案,但是它不起作用。


我解决了这个问题,也许可以为您提供帮助。

PureComponent

根据上述指南文档,当您使用PureComponent或与状态管理工具(如reduxmobx)一起使用时,可能会阻止路由更新。 检查您的路由组件,确保您没有阻塞组件的重新渲染。

Jianhua Cheng answered 2020-07-12T04:28:42Z
0 votes

试试这个,

import React from "react";

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


import Details from "./components/Details";

ReactDOM.render((
  <Router>
        <Route path="/" component={Wrapper} >
            <IndexRoute component={Users} />
            <Route path="/details" component={Details} />
        </Route>
  </Router>
), document.getElementById('app'))
Vaibhav Singh answered 2020-07-12T04:29:02Z
0 votes

您应该检查一下:[https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md]

因此,绝对不是<div><BrowserRouter>,因为它们是由<Route>直接渲染的,而location将传递给props

我想知道,为什么在<BrowserRouter><Route>之间需要<div>? 删除它,让我知道它是否有效。

yuji answered 2020-07-12T04:29:32Z
0 votes

我正面临着类似的问题,我决心像这样请看看我希望它的工作。

您需要在组件中使用componentWillReceiveProps函数。

通过调用url第一次单击链接www.example.com/content1/ componentDidMount()运行。

现在,当您单击另一个链接时,说www.example.com/content2/,将调用相同的组件,但是这次prop发生了变化,您可以在componentWillReceiveProps(nextProps)下访问此新prop,可用于调用API或将状态设为空白并获取新的 数据。

componentWillReceiveProps(nextProps){
     //call your API and update state with new props
}
Sanat Gupta answered 2020-07-12T04:30:07Z
0 votes

我在条件布局上遇到了类似的问题:

class LayoutSwitcher extends Component {
  render () {
    const isLoggedIn = this.props.isLoggedIn
    return (
      <React.Fragment>
        { isLoggedIn
          ? <MainLayout {...this.props} />
          : <Login />
        }
      </React.Fragment>
    )
  }
}

并重写如下条件:

  render () {
    const isLoggedIn = this.props.isLoggedIn
    if (isLoggedIn) {
      return <MainLayout {...this.props} />
    }
    return <Login />
  }

这解决了。 就我而言,上下文似乎丢失了。

sym answered 2020-07-12T04:30:35Z
0 votes

我有类似的问题,但结构不同。 我添加了一个可以处理所有路由的路由器,并使用了Switch组件来切换视图。 但实际上,事实并非如此。 仅URL更改,但未更改。 原因是在SideBar组件内部使用的Link组件,该组件在Router组件外部。 (是的,我已经用“ withRouter”导出了SideBar,但是没有用)。因此,解决方案是将保存所有Link组件的SideBar组件移入Router。

问题出在我的链接器中,它们在我的路由器之外

<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>
Yusufbek answered 2020-07-12T04:31:05Z
translate from https://stackoverflow.com:/questions/43351752/react-router-changes-url-but-not-view