react-routerエラー <Router>のなかで<Link>をしているのに怒られてしまう

Question

こちらのサイトでreact入門中なのですがreact-routerのLinkを使うとエラーが起きてしまいます。

Invariant failed: You should not use <Link> outside a <Router>
<Router>の中じゃないとこで<Link>使ったらあかんでという意味だと思うのですがちゃんと中で使っています。

発生している問題・エラーメッセージ

Invariant failed: You should not use <Link> outside a <Router>

該当のソースコード

mport React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";


import Layout from "./pages/Layout";
import Featured from "./pages/Featured";
import Archives from "./pages/Archives";
import Settings from "./pages/Settings";

const app = document.getElementById('app');

ReactDOM.render(<Layout />, app);
ReactDOM.render(
  <Router>
    <Layout>
      <Route exact path="/" component={Featured}></Route>
      <Route path="/archives" component={Archives}></Route>
      <Route path="/settings" component={Settings}></Route>
    </Layout>
  </Router>,
app);

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

export default class Layout extends React.Component {
  render() {
    console.log("動いとるよ")
    return (
      <div>
        <h1>KillerNews.net</h1>
        {this.props.children}
        <Link to="archives">archives</Link>,
        <Link to="settings">settings</Link>
      </div>
    );
  }
}

試したこと

react-router react-router-demoのダウングレード、こちらの解決策
どちらもダメでした

補足情報（FW/ツールのバージョンなど）

reactの構造などもあまり理解できていないので必要な情報があればすぐに教えてください
よろしくおねがいします

Answer 1

こんにちは
ご質問のコードにある、以下の部分

const app = document.getElementById('app');

ReactDOM.render(<Layout />, app);
ReactDOM.render(
  <Router>
    <Layout>
      <Route exact path="/" component={Featured}></Route>
      <Route path="/archives" component={Archives}></Route>
      <Route path="/settings" component={Settings}></Route>
    </Layout>
  </Router>,
app);

で、 ReactDOM.render を2回行っていますが、ひとつ目の下記の行

ReactDOM.render(<Layout />, app);

を削除してみるといかがでしょうか？

Comments

[hyakkaozisann]

「やられた」と思ってしまいました。
とても助かりました、ありがとうございます！！

[jun68ykt]

どういたしまして。
> とても助かりました
とのことで、よかったです????