Reactの画面遷移のためにルーティングを学習中です。
下記のサイトを試しに自身で実施して実行すると、画面が真っ白になりました。
ルーティングの設定 | React Router v6 はじめでもわかるルーティングの設定方法の基礎
最初はサイトのソースをそのままコピー&ペーストで実行すると真っ白です。
そこで調査して、jsonファイルにhomepageを設定しましたが解決していません。
対処方法をご教授していただきたいと思います。
なお、App.cssは特に何も触っていません。
以下のコードで…
- ★の部分を入れて実行すると真っ白です。
- ★を除くと "Hello React Router v6" と表示されます。
App.js
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;
Index.js、package.jsonも記載します。
調査したら、package.json にhomepageの設定が解決案としてありましたので
設定しています。
Index.js
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')
);
package.json
{
"name": "react-router-6",
"version": "0.1.0",
"homepage": "./", ★こちらを設定しました。
"private": true,
"dependencies": {
package.json
は途中で途切れているようにも見えますが、これで全部でしょうか?