☰

ReactルーターはURLを変更しますが、ビューは変更しません 質問する

tag-icon • tag-icon reactjs react-router
ReactルーターはURLを変更しますが、ビューは変更しません 質問する

ルーティングを使用して React のビューを変更するときに問題があります。ユーザーのリストのみを表示し、各ユーザーをクリックすると詳細ページに移動するようにしたいです。ルーターは次のとおりです。

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 がスローされるため、ルートは認識されているものの、更新されていないようです。

ベストアンサー1

exactindexRouteの属性を指定する必要があります。そうしないと、even/detailsルートでも と一致します。また、から/インポートしてみてください。Routereact-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'))

アップデート：

他に必要なことは、コンポーネントのユーザーを にアタッチすることです。コンポーネントが を受信して​​いない場合にのみwithRouterを使用する必要があります。withRouterRouter props

これは、コンポーネントがルータによってレンダリングされたコンポーネントのネストされた子またはRouterプロパティを渡していないまたは、コンポーネントがルーターにまったくリンクされておらず、ルートとは別のコンポーネントとしてレンダリングされる場合。

Users.jsに以下を追加

import {withRouter} from 'react-router';

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

ドキュメント

おすすめ記事