web-dev-qa-db-ja.com

Reactルーターv4ルートが機能しない

私は反応するのが比較的新しいので、Reactルーターが機能するようにする方法を見つけようとしています。

import React from 'react';
import ReactDOM from 'react-dom';

import {BrowserRouter as Router, Route, Switch, IndexRoute, Link} from 'react-router-dom';

const Home = () => <h1><Link to= "/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const Test = () => (
  <Router>
    <Switch>
    <Route path ="/" component = {Home} />
    <Route path ="/about" component = {About} />
    </Switch>
  </Router>
)

ReactDOM.render(<Test />, document.getElementById('app'));

アプリを実行すると、ホームコンポーネントが問題なくロードされ、「Click Me」リンクをクリックすると、URLがlocalhost/aboutに変わりますが、何も起こりません。更新をクリックすると、「Cannot GET/about」が表示されます。明らかに私は何か間違ったことをしているが、何を理解することができなかった。 Webpackも使用しています。

reactjsreact-routerreact-router-v4
12
WebbH

/には正確なパスを使用する必要があります。そうでない場合は、/aboutにも一致します。

<Route exact path="/" component={Home} />

コメントで述べたように、このシンプルなものについては、サーバーコードとWebパックの設定がすべて正しいことを確認する Create React App を使用することをお勧めします。 create-react-appを使用すると、npmを使用してリアクションルーターv4パッケージをインストールし、上記のコードをApp.jsファイルに配置するだけで機能します。以下に示すように、create-react-appで動作するようにコードを変更します。

// App.js
import React from 'react';

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

const Home = () => <h1><Link to="/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
)

export default App;

React Router V4 documentation からのクイックスタート手順）は、先ほど説明したのとほぼ同じことを示します。

19
Todd Chaffee

Localhostから実行している場合、webpack.configファイルにhistoryApiFallback：trueを追加する必要があります

16
VineFreeman

たぶんそれは誰かを助けることができます。 Routerを使用する代わりに、適切な履歴を使用するのを忘れました。プロパティhistory={...}を無視して独自のBrowserRouterを使用していました。手動で作成した履歴でページをリダイレクトしようとしましたが、BrowserRouterは独自の履歴を使用していました。

0
Marcelo Rafael