[解決済み】<Router>の外側で<Link>を使用してはならない

質問

サンプルアプリケーションでreact-routerを設定しようとしているのですが、以下のエラーが発生します。

You should not use <Link> outside a <Router>

私のアプリはこのように設定されています。

親コンポーネント

const router = (
  <div className="sans-serif">
    <Router histpry={browserHistory}>
      <Route path="/" component={Main}>
        <IndexRoute component={PhotoGrid}></IndexRoute>
        <Route path="/view/:postId" component={Single}></Route>
      </Route>
    </Router>
  </div>
);

render(<Main />, document.getElementById('root'));

子供/ Main コンポーネント

export default () => (
  <div>
    <h1>
      <Link to="/">Redux example</Link>
    </h1>
  </div>
)

何が間違っているのでしょうか？

サンドボックスのリンクはこちらです。 を使用して、問題を実証してください。

解決方法は？

React-Router V4を使用していると思われますが、元々同じものを使用しているので サンドボックスのリンクです。

をレンダリングしていますね。 Main コンポーネントの呼び出しで ReactDOM.render をレンダリングする Link の外側にあり、Mainコンポーネントは Router そのため、エラーが発生するのです。

ルータの外部で <Link> を使用するべきではありません。

変更点 :

1. のいずれかを使用します。 これらのルーター React-Router V4を使用しているため、BrowserRouter/HashRouterなど、様々なルーターがあります。

2. ルーターは1つしか子を持つことができないので、すべてのルートを div または スイッチ .

3. React-Router V4では、ネストされたルートの概念がありません。ネストされたルートを使用したい場合は、そのコンポーネント内で直接ルートを定義してください。

チェック この動作例 をそれぞれ変更しました。

親コンポーネントです。

const App = () => (
  <BrowserRouter>
    <div className="sans-serif">
      <Route path="/" component={Main} />
      <Route path="/view/:postId" component={Single} />
    </div>
  </BrowserRouter>
);

render(<App />, document.getElementById('root'));

Main ルートからのコンポーネント

import React from 'react';
import { Link } from 'react-router-dom';

export default () => (
  <div>
    <h1>
      <Link to="/">Redux example</Link>
    </h1>
  </div>
)

などなど。

こちらの回答もご覧ください。 react router v4でネストされたルート