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'))
/detailsというURLを使用すると、ブラウザはそのURLに移動しますが、表示は変わりません。 他のルートは404を投げるので、ルートを認識しているようですが、更新はされません。
そうしないと、/details
ルートであっても、/
とマッチしてしまいます。また、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'))
UPDATE:
もうひとつ必要なことは、コンポーネントの Users に withRouter
を付けることです。withRouterは、コンポーネントが
Router props`を受け取らない場合にのみ使用する必要があります。
これは、コンポーネントがRouterによってレンダリングされたコンポーネントの入れ子である場合や、Routerのpropsを渡していない場合、またはコンポーネントがRouterに全くリンクされておらず、Routeから独立したコンポーネントとしてレンダリングされている場合に起こります。
Users.jsに
import {withRouter} from 'react-router';
.........
export default withRouter(Users)
[DOCS][1]
私もトラブルに遭遇しました。
https://github.com/chengjianhua/templated-operating-system
また、Shubham Khatri氏が紹介している解決策を試してみましたが、うまくいきませんでした。
私はこの問題を解決しました、多分あなたを助けることができる。
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md
上記のガイドドキュメントによると、PureComponent
を使用したり、redux
やmobx
などの状態管理ツールを使用したりするとルートの更新がブロックされる可能性があります。ルートコンポーネントをチェックして、コンポーネントの再レンダリングをブロックしていないことを確認してください。
試してみてください。
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'))