サーバ側の反応ルータのベースネームを使用

Question

私のサーバに/clientpanelディレクトリからサービスを提供しています。だから私のURLはhttp://xxx.yy/clientpanelです。クライアント側のすべてで

const history = useRouterHistory(createHistory)({ 
    basename: "/clientpanel" 
}); 

render(
    <Router history={history} routes={routes}/>, 
    document.getElementById("root") 
); 

だけで正常に動作します：これは私のクライアント側のコードです。すべてのURLは/clientpanelに関連していますが、サーバーでこの作業を行う方法については問題があります。最初のページロードで

const history = useRouterHistory(createMemoryHistory)({ 
    basename: "/clientpanel" 
}); 

match({ routes, location: req.url, history}, (error, redirectLocation, renderProps) => { 
    if (renderProps) { 
     const html = renderToString(
      <RouterContext {...renderProps}/> 
     ); 

     res.send(renderFullPage(html)) 
    } 
}); 

私が最初<Link>/clientpanelをクリックした後、この作業を取得するには、URLに/clientpanelを省略したが、その後、クライアント側にする必要があります初めに追加された：これは私のサーバー側のコードがあります。どのようにクライアントとサーバー側の両方で一貫して動作するようにするには？

Answer 1

あなたが一致するベース名を提供する必要があります。

match({ routes, location: req.url, basename: "/clientpanel" }, ...) 

Answer 2

私は最終的に次のコードで動作するようにそれを得た：

const basename = '/foo' 
const location = req.url.replace(basename, '') 
// createMemoryHistory from the history package 
const history = useRouterHistory(() => createMemoryHistory(location))({ basename }) 

match({ history, routes, location }, (error, redirectLocation, renderProps) => { 

EDITさらに良い

：

const basename = '/foo' 
const location = req.url.replace(basename, '') 
// createMemoryHistory from the react-router package 
const history = createMemoryHistory({ entries: [location], basename }) 

match({ history, routes, location }, (error, redirectLocation, renderProps) => {