

Reactの画面遷移のためにルーティングを学習中です。

下記のサイトを試しに自身で実施して実行すると、画面が真っ白になりました。

[ルーティングの設定 | React Router v6
はじめでもわかるルーティングの設定方法の基礎](https://reffect.co.jp/react/react-router-6#i-2)

最初はサイトのソースをそのままコピー＆ペーストで実行すると真っ白です。  
そこで調査して、jsonファイルにhomepageを設定しましたが解決していません。  
対処方法をご教授していただきたいと思います。  
なお、App.cssは特に何も触っていません。

以下のコードで…

  * ★の部分を入れて実行すると真っ白です。
  * ★を除くと "Hello React Router v6" と表示されます。

App.js

[code]

    import {Routes, Route} from 'react-router-dom';
    import Home from './routes/home';
    
    
    // import About from './routes/about';
    // import Contact from './routes/contact';
    
    
    function App() {
    return (
     <div className="App">              
        <h1>Hello React Router v6</h1>
         <Routes>                                                   ★
            <Route path="./" element={<Home />} />      　　　　　　 ★
         </Routes>                                                  ★ 
     </div>
        );
    }
    
    export default App;
    
[/code]

  
Index.js、package.jsonも記載します。  
調査したら、package.json にhomepageの設定が解決案としてありましたので  
設定しています。

Index.js

[code]

    import React from 'react';
    import ReactDOM from 'react-dom/client';
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';
    
    import { BrowserRouter } from 'react-router-dom';
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
      <React.StrictMode>
       <App />
     </React.StrictMode>
    );
    
    ReactDOM.render(
        <BrowserRouter>
         <App />
        </BrowserRouter>,
    document.getElementById('root')
    );
    
[/code]

package.json

[code]

    {
      "name": "react-router-6",
      "version": "0.1.0",
      "homepage": "./",             ★こちらを設定しました。
      "private": true,
      "dependencies": {
    
[/code]


CC BY-SA 4.0
2022-11-03T16:08:05.490
91974
2023-09-15T06:05:35.877
2022-11-05T04:40:35.897
3060
55110
question
javascript reactjs react-router-dom
React のルーティング設定で真っ白な画面が表示されてしまう


v6をインストールしていることを再確認してみてください。

npm install react-router-dom@6


CC BY-SA 4.0
2022-11-19T06:23:04.743
92308
2022-11-19T06:23:04.743
55493
91974
answer


React の import の仕方は正しいでしょうか？  
import する対象によって import 方法が異なります。

[React のimport {}のあるなしについて](https://terakoya.sejuku.net/question/detail/16886)

>   1. export defaultで公開してある（コンポーネントなど）→ 中括弧なしでimportできる
>   2. exportで公開してある（関数やフックなど）→ 中括弧をつけてimport
>


CC BY-SA 4.0
2022-11-24T06:47:13.823
92399
2022-11-24T23:36:12.777
2022-11-24T23:36:12.777
3060
54288
91974
answer