反应路由器更改网址但不查看 [英] React router changes url but not view

问题描述

我无法更改视图以响应路由.我只想显示一个用户列表，点击每个用户应该导航到详细信息页面.这是路由器:

从react"导入React；从react-dom"导入 ReactDOM；从'react-router-dom'导入{ BrowserRouter}；从./components/Users"导入用户；从反应路由器"导入{路由器，路由}；从./components/Details"导入详细信息；ReactDOM.render((<浏览器路由器><div><Route path="/" component={Users}/><Route path="/details" component={Details}/>

</BrowserRouter>), document.getElementById('app'))

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

解决方案

你需要为你的 indexRoute 指定属性 exact，否则即使对于 /details 路由它会仍然与 / 匹配.也尝试从 react-router-dom

导入 Route

从react"导入React；从react-dom"导入 ReactDOM；从'react-router-dom'导入{ BrowserRouter, Route };从./components/Users"导入用户；从./components/Details"导入详细信息；ReactDOM.render((<浏览器路由器><div><路由精确路径="/" component={Users}/><Route path="/details" component={Details}/>

</BrowserRouter>), document.getElementById('app'))

更新:

您需要做的另一件事是使用 withRouter 附加您的组件用户.仅当您的组件未接收到 Router props 时，您才需要使用 withRouter，

如果您的组件是由路由器呈现的组件的嵌套子组件，或者您没有将路由器道具传递给它，或者当组件根本没有链接到路由器，而是作为独立于路由的组件呈现.

在 Users.js 中添加

import {withRouter} from 'react-router';…………导出默认 withRouter(Users)

文档

I am having trouble changing the view in react with routing. I only want to show a list of users, and clicking on each user should navigate to a details page. Here is the router:

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

When I use the url /details my browser navigates to that url, but does not change the view. Any other route throws 404 so it seems to recognize the route but not update.

解决方案

You need to specify the attribute exact for your indexRoute, otherwise for even /details route it will still match with / . Also try to import Route from 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'))

UPDATE:

Another thing that you need to do is to attach your component Users with withRouter. You need to make use of withRouter only when your component is not receiving the Router props,

This may happen in cases when your component is a nested child of a component rendered by the Router or you haven't passed the Router props to it or when the component is not linked to the Router at all and is rendered as a separate component from the Routes.

In Users.js add

import {withRouter} from 'react-router';

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

DOCS

这篇关于反应路由器更改网址但不查看的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！