PS C:\Users\starmagichat> npm react-router-dom -v
10.2.4
PS C:\Users\starmagichat> npm update react-router-dom

up to date, audited 9 packages in 756ms

found 0 vulnerabilities
PS C:\Users\starmagichat> npm react-router-dom -v
10.2.4
PS C:\Users\starmagichat>

PS C:\Users\starmagichat> npm uninstall react-router-dom

removed 8 packages, and audited 1 package in 332ms

found 0 vulnerabilities
PS C:\Users\starmagichat> npm install react-router-dom@latest

added 8 packages, and audited 9 packages in 1s

found 0 vulnerabilities
PS C:\Users\starmagichat> npm react-router-dom -v
10.2.4

PS C:\Users\starmagichat> npm cache clean
npm ERR! As of npm@5, the npm cache self-heals from corruption issues
npm ERR!   by treating integrity mismatches as cache misses.  As a result,
npm ERR!   data extracted from the cache is guaranteed to be valid.  If you
npm ERR!   want to make sure everything is consistent, use `npm cache verify`
npm ERR!   instead.  Deleting the cache can only make npm go slower, and is
npm ERR!   not likely to correct any problems you may be encountering!
npm ERR!
npm ERR!   On the other hand, if you're debugging an issue with the installer,
npm ERR!   or race conditions that depend on the timing of writing to an empty
npm ERR!   cache, you can use `npm install --cache /tmp/empty-cache` to use a
npm ERR!   temporary cache instead of nuking the actual one.
npm ERR!
npm ERR!   If you're sure you want to delete the entire cache, rerun this command
npm ERR!   with --force.

npm ERR! A complete log of this run can be found in: C:\Users\starmagichat\AppData\Local\npm-cache\_logs\2024-04-27T09_27_22_128Z-debug-0.log
PS C:\Users\starmagichat> npm install react-router-dom@latest

up to date, audited 9 packages in 727ms

found 0 vulnerabilities
PS C:\Users\starmagichat> npm react-router-dom -v
10.2.4
PS C:\Users\starmagichat>

PS C:\Users\starmagichat> npm cache verify
Cache verified and compressed (~\AppData\Local\npm-cache\_cacache)
Content verified: 3438 (386976687 bytes)
Content garbage-collected: 612 (479515827 bytes)
Index entries: 3438
Finished in 13.341s
PS C:\Users\starmagichat>
PS C:\Users\starmagichat> npm uninstall react-router-dom

removed 8 packages, and audited 1 package in 308ms

found 0 vulnerabilities
PS C:\Users\starmagichat> npm react-router-dom -v
10.2.4
PS C:\Users\starmagichat> npm uninstall react-router-dom@latest

up to date, audited 1 package in 292ms

found 0 vulnerabilities
PS C:\Users\starmagichat> npm react-router-dom@latest -v
10.2.4
PS C:\Users\starmagichat> npm install react-router-dom@latest

added 8 packages, and audited 9 packages in 1s

found 0 vulnerabilities
PS C:\Users\starmagichat> npm -v
10.2.4
PS C:\Users\starmagichat>

npm view react-router-dom version

npm ls

PS C:\Users\starmagichat> npm view react-router-dom version
6.23.0

import './App.css';
import Header from './Header';
import Main from './Main';
import Proggramming from './Proggramming'
import Sns from './Sns'
import Touhou from './Touhou'
import { BrowserRouter, Link, Routes, Route } from "react-router-dom";



function App() {
  return (
    <>
      <div>dd </div>
      <Link to='/'>Home</Link>
      <br />
      <Link to='/Proggramming'>Proggramming</Link>
      <br />
      <Link to='/Sns'>Page2</Link>
      <br />
      <Link to='/Touhou'>Page3</Link>
      <br />
      <Header />
      <BrowserRouter>

        <div id='main'>

          <Routes>

            <Route exact path='/' element={<Main />}>
              <Main />
            </Route>

            <Route path='/proggramming' element={<Proggramming />}>
              <Proggramming />
            </Route>

            <Route path='/sns' element={<Sns />}>
              <Sns />
            </Route>

            <Route path='/touhou' element={<Touhou />}>
              <Touhou />
            </Route>

          </Routes>
        </div>
      </BrowserRouter>
    </>
  );
}

export default App;

import { BrowserRouter, Routes, Route } from "react-router-dom";
︙
︙
{/* router / App 関連のコンポーネント */}
<BrowserRouter>
  <Routes>
    /* index パスコンポーネント（TOPページ）*/
    <Route path='/' index element={<App />} />

    /* 2 階層目のコンポーネント（サブページ類）*/
    <Route path="archive-hoge" element={<MainHoge children={
      <>children の内容</>
    } />} />
    <Route path="hogeSinglesComponents" element={<HogeSingles />}>
      /* element が「指定されていないこと」によって警告エラーが表示されるため <Route index /> の記述は無し */

      /* サブページの子ページのパス名：hogeSinglesComponents/single-XXXX */
      <Route path="single-Foo" element={<HogeFoo />} />
      <Route path="single-Piyo" element={<HogePiyo />} />
      <Route path="single-John" element={<HogeJohn />} />
      <Route path="single-Potie" element={<HogePotie />} />
      <Route path="single-Carie" element={<HogeCarie />} />
      <Route path="single-Gory" element={<HogeGory />} />
    </Route>

    /* 各種 2 階層目のコンポーネント（サブページ類）*/
    <Route path="archive-service" element={<MainService />} />
    <Route path="archive-staff" element={<MainStaff />} />
    <Route path="archive-other" element={<MainOther />} />
    <Route path="about" element={<MainAbout />} />
    <Route path="contact" element={<MainContact />} />

    /* すべての Route コンポーネントの path 値による設定を評価した上で「ベストマッチのものが選択される仕組み」なので、パスエントリーの最後に * を置く */
    <Route path="*" element={<NotFound />} />
  </Routes>
</BrowserRouter>
{/* router / App 関連のコンポーネント */}