🐷
react-router-domをサブディレクトリでデプロイしたかった
react-router-domをサブディレクトリでデプロイしたかった
手短に...
reactプロジェクトをサブディレクトリにデプロイした時に、例えばhttps://github.com/dist/ にデプロイすると404コンポーネントが帰ってきました
コードはこんな感じ
import { Route, Routes, Link } from "react-router-dom";
import Home from "../page/home";
import About from "../page/about";
import Page404 from "../page/404";
export default function Router() {
return (
<>
<ul>
<li>
<Link to='/'>Home</Link>
</li>
<li>
<Link to='/about'>About</Link>
</li>
</ul>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
<Route path='*' element={<Page404 />} />
</Routes>
</>
);
}
解決方法
import { Route, Routes, Link } from "react-router-dom";
import Home from "../page/home";
import About from "../page/about";
import Page404 from "../page/404";
export default function Router() {
return (
<>
<ul>
<li>
<Link to='/dist'>Home</Link>
</li>
<li>
<Link to='/dist/about'>About</Link>
</li>
</ul>
<Routes>
<Route path='/dist' element={<Home />} />
<Route path='/dist/about' element={<About />} />
<Route path='*' element={<Page404 />} />
</Routes>
</>
);
}
パスにプロジェクトフォルダ名(今回はdist)を追加することで解決いたしました。
他にこれならbase指定できるなどありましたらコメントで教えていただきたいです....
Discussion