開始行: * キーワード [#c542fc3b] - react - react-router-dom - PUBLIC_URL - axios - http * 現象 [#v702a333] react-router-domでルーティングしたところベースURLが抜ける。 ベースURLは cross-env で PUBLIC_URL に設定している。 また、次のようにルーティングを定義している。 <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/calc">Calculator</Link></li> <li><Link to="/manif">Manifest</Link></li> </ul> <Switch> <Route path="/calc" component={Calculator} /> <Route path="/manif" component={ManifestDetail} /> <Route exact path="/" component={() => ( <p>Select a page from the menus.</p> )} /> <Route component={() => ( <p>404 NOT FOUND</p> )} /> </Switch> </div> * 原因 [#z04fb350] PUBLIC_URLに設定するだけではいい感じにやってくれないから... * 対策 [#re4cc7a9] サブパスも含めて書く。 <div> <ul> <li><Link to={`${process.env.PUBLIC_URL}/`}>Home</Li... <li><Link to={`${process.env.PUBLIC_URL}/calc`}>Calc... <li><Link to={`${process.env.PUBLIC_URL}/manif`}>Man... </ul> <Switch> <Route path={`${process.env.PUBLIC_URL}/calc`} compo... <Route path={`${process.env.PUBLIC_URL}/manif`} comp... <Route exact path={`${process.env.PUBLIC_URL}/`} com... <p>Select a page from the menus.</p> )} /> <Route component={() => ( <p>404 NOT FOUND</p> )} /> </Switch> </div> * 備考 [#e364a7ad] httpするときのリソースパスにも注意。次のように書ける。 Axios.get(process.env.PUBLIC_URL + '/manifest.json') * 参考 [#eb51c50b] - [[React Router paths don’t match after deploying to Git... * 関連 [#v92b6de2] - [[React/ベースURLを設定する]] 終了行: * キーワード [#c542fc3b] - react - react-router-dom - PUBLIC_URL - axios - http * 現象 [#v702a333] react-router-domでルーティングしたところベースURLが抜ける。 ベースURLは cross-env で PUBLIC_URL に設定している。 また、次のようにルーティングを定義している。 <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/calc">Calculator</Link></li> <li><Link to="/manif">Manifest</Link></li> </ul> <Switch> <Route path="/calc" component={Calculator} /> <Route path="/manif" component={ManifestDetail} /> <Route exact path="/" component={() => ( <p>Select a page from the menus.</p> )} /> <Route component={() => ( <p>404 NOT FOUND</p> )} /> </Switch> </div> * 原因 [#z04fb350] PUBLIC_URLに設定するだけではいい感じにやってくれないから... * 対策 [#re4cc7a9] サブパスも含めて書く。 <div> <ul> <li><Link to={`${process.env.PUBLIC_URL}/`}>Home</Li... <li><Link to={`${process.env.PUBLIC_URL}/calc`}>Calc... <li><Link to={`${process.env.PUBLIC_URL}/manif`}>Man... </ul> <Switch> <Route path={`${process.env.PUBLIC_URL}/calc`} compo... <Route path={`${process.env.PUBLIC_URL}/manif`} comp... <Route exact path={`${process.env.PUBLIC_URL}/`} com... <p>Select a page from the menus.</p> )} /> <Route component={() => ( <p>404 NOT FOUND</p> )} /> </Switch> </div> * 備考 [#e364a7ad] httpするときのリソースパスにも注意。次のように書ける。 Axios.get(process.env.PUBLIC_URL + '/manifest.json') * 参考 [#eb51c50b] - [[React Router paths don’t match after deploying to Git... * 関連 [#v92b6de2] - [[React/ベースURLを設定する]] ページ名: