このリポジトリで状況再現できますでしょうか.そもそもreact-router-dom
すらインストールされていないように見えます.
アップロードするファイルを確認してください.
ReactRouterがうまく使えない
解決したいこと
以前、Qiitaでプログラミングに詳しい人にReactRoutercv6を教えてもらったので、
(その節はお世話になりました。)
それをテストとしてルーティング機能はまだ作っていませんが、作ってみました。
発生している問題・エラー
該当するソースコード
import './App.css';
import Main from './components/Main';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path='/' index element={<Main />} />
</Routes>
</BrowserRouter>
</>
);
}
export default App;
自分で試したこと
今回useRefエラーが大量発生していたのですが、全くuseRefを使った覚えがないんですよね..(そもそもフックスを一切使用しようとしていない)
そのため、何かデフォルトでuseRefを使っているのではと思ったのですが、そういう記述は私が探した限りでは見つからなかったのです。
皆様のお力添えいただけると助かります。
参考リンク
Reactは様々なファイルがあり、私が依存関係を一から説明するとわかりずらいと思うので、今回わかりやすくするために、GitHubにリポジトリを上げました。
よろしければ参考にしてください
https://github.com/starmagichat/react-hoshibou
もしかしたら前提知識などが足りず、おかしいことを言っていることもあるかもしれませんが、その時は遠慮なくお申し付けください
2Answer
Comments
@starMagichat
Questionerありがとうございます。
PS C:\Users\starmagichat> npm ls starmagichat@ C:\Users\starmagichat `-- react-router-dom@6.23.0
PowerShellで確認を行いましたが、このようにreact-ruoter-domはインストールされてはいます。
状況再現というのを行ってみたいのですが、どのように行うかなどはありますか?依存関係のインストールは開発しているパッケージに対して行う必要がありますが把握していますか?
今あなたが見ているのはグローバルにインストールされているものです.再現というのは回答者が同じ状態を作れることをそう言っているだけで,特定の操作のことではありません.
npm周りは何も気をつけずに触っていると(特にパッケージ外でコマンドを叩いてはならない),こういうふうにライブラリが無茶苦茶になって困ったことになります.@starMagichat
Questionerありがとうございます。無事成功させることが出来ました!
import './App.css'; import { BrowserRouter, Routes, Route } from 'react-router-dom'; import Main from './Main'; import Sub from './Sub'; function App() { return ( <> <div>現在の状態</div> <BrowserRouter> <Routes> <Route path='/' index element={<Main />} /> <Route path='/sub' index element={<Sub />} /> </Routes> </BrowserRouter> </> ); } export default App;
グローバルでインストールするだけではなく
開発しているパッケージに対してもパッケージをインストールしなければならないということは
全く知らなかったので、インストール方法を調べてみてパッケージのルートディレクトリでnpm install react-router-dom
を使用し、試行錯誤しながら上記のコードを書いたら無事ルーティング機能が実装できました
↑拡大している、しっかりと/subと入れるとSub.jsの内容が反映された。
Reactって色々な知識が必要なのですね。
様々なこと教えて頂き感謝します。
ありがとうございました!基本的にはローカルインストールで開発するのが望ましいです。
グローバルインストールは、node全体で使うようなパッケージに留めるぐらいですかね。@starMagichat
Questionerありがとうございます。
そうなんですね、てっきりPowerShellなどを使って入れれば、自動でできる仕様なのかと思っていたのですが、ローカルインストールという概念があったことが知れてとてもよかったです。
こちらの記事によるとBrowserRouterはAppを囲うらしいですね、どうでしょうか?
Comments
@starMagichat
Questioner回答ありがとうございます
了解です。イメージ的にはindex.jsはこのような感じですか。import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import reportWebVitals from './reportWebVitals'; import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { BrowserRouter } from "react-router-dom"; import App from "./App"; const rootElement = document.getElementById("root"); const root = createRoot(rootElement); root.render( <StrictMode> <BrowserRouter> <App /> </BrowserRouter> </StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();