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

2017-04-18 reactjs react-router react-router-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'));

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

Answers

/正確なパスを使用する必要があります。そうしないと/aboutも一致/aboutます。

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

コメントで述べたように、この単純なものについては、サーバーコードとWebpack設定がすべて正しいことを確認するCreate React Appを使用することをお勧めします。 create-react-appを使用create-react-appたら、 npmを使用して、react router v4パッケージをインストールし、上記のコードをApp.jsファイルに配置するApp.jsます。以下に示すように、コードをcreate-react-appcreate-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のドキュメントにあるクイックスタートの手順では、今説明したのとほとんど同じことがわかります。

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

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

問題を解決しないでexact追加すると、私はこれを

  <Route exact path="/" component={App} />
  <Route path="/login" component={Login} />
  <Route path="/register" component={Register} />

これです

  <Route exact path="/"> <App /> </Route>
  <Route path="/login"> <Login /> </Route>
  <Route path="/register"> <Register /> </Route>

ルートチャイルドとしてコンポーネントを配置すると、ページのルーティングが解決され、他の誰かにも役立つことを願っています

この問題は、デフォルトルートを常に最後に保つことでも解決できます

<Route path ="/about" component = {About} />

<Route path="/" component={Home} /> //常に最後に

exactキーワードを入力する必要はありません

Related