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

问题描述

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

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

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

解决方案

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

导入 Route

从react"导入反应；从react-dom"导入 ReactDOM；从 'react-router-dom' 导入 { BrowserRouter, Route };从./components/Users"导入用户；从./components/Details"导入详细信息；ReactDOM.render((<浏览器路由器>
<路由确切路径="/" 组件={Users}/><Route path="/details" 组件={Details}/></div></浏览器路由器>), document.getElementById('app'))

更新:

您需要做的另一件事是使用 withRouter 附加组件用户.只有当你的组件没有收到 Router props 时，你才需要使用 withRouter，

这可能发生在以下情况下:您的组件是 Router 渲染的组件的嵌套子组件，或者您没有将 Router 属性传递给它，或者当组件根本没有链接到路由器，而是作为独立于路由的组件呈现.

在 Users.js 中添加

从'react-router'导入{withRouter}；…………使用Router(用户)导出默认值

DOCS

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

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