警告 `href`プロップが一致しませんでした。

Question

私はreact-router-domを使用していますが、これは問題を引き起こしていると推測していますが、見た目や修正方法がわからないことがあります。私もWarning: Did not expect server HTML to contain a <nav> in <div>のようなエラーが出ます。

私が述べたように、参考になる特定のコードがあると思う場合は、どこに見えるかわからないので教えてください。それ以外の場合は、SSRを行うために使用するコードを投稿することができます。

EDIT：正確なエラーは：、Warning: Prop hrefのdid not match. Server: "/profile/5a073dc44cb45b00125e5c82" Client: "profile/5a073dc44cb45b00125e5c82"

私は、クライアントをチェックして、それはそれは<div>で<nav>と他のエラーのためとして、/がないと言うので、わからない/profile/:idを持っています私はnavを私のヘッダーの中に持っていますが、どうすればそれを "修正"するのかは分かりません。

import React from 'react'; 
import { renderToString } from 'react-dom/server'; 
import { StaticRouter } from 'react-router-dom'; 
import { Provider } from 'react-redux'; 
import { renderRoutes } from 'react-router-config'; 
import serialize from 'serialize-javascript'; 
import { Helmet } from 'react-helmet'; 
import { matchRoutes } from 'react-router-config'; 

import routes from './src/routes'; 
import createStore from './src/stores'; 

function handleRender(req, res) { 
    let initial = {}; 

    if (req.vertexSession != null && req.vertexSession.user != null) { 
    initial.user = { currentUser: req.vertexSession.user }; 
    } 
    const store = createStore.configure(initial); // create Store in order to get data from redux 

    const promises = matchRoutes(routes, req.path) 
    .map(({ route, match }) => { 
     // Matches the route and loads data if loadData function is there 
     return route.loadData 
     ? route.loadData(store) 
     : route.loadDataWithMatch ? route.loadDataWithMatch(store, match) : null; 
    }) 
    .map(promise => { 
     if (promise) { 
     return new Promise((resolve, reject) => { 
      promise.then(resolve).catch(resolve); // lets all data load even if route fails 
     }); 
     } 
    }); 

    Promise.all(promises).then(() => { 
    const context = {}; 
    if (context.url) { 
     return res.redirect(301, context.url); // redirect for non auth users 
    } 

    if (context.notFound) { 
     res.status(404); // set status to 404 for unknown route 
    } 
    const content = renderToString(
     <Provider store={store}> 
     <StaticRouter location={req.path} context={context}> 
      <div>{renderRoutes(routes)}</div> 
     </StaticRouter> 
     </Provider> 
    ); 
    // console.log(store.getState()); 
    const initialState = serialize(store.getState()); 

    const helmet = Helmet.renderStatic(); 

    res.render('index', { content, initialState, helmet }); 
    }); 
} 

module.exports = handleRender; 

Answer 1

これを修正しましたか？私は私の反応のアプリで同様の問題を抱えていた。

<Link to="./shop">Shop</Link>

私の修正：あなたは、サーバーでレンダリングされているものは何でも

<Link to="/shop">Shop</Link>

が問題である。ここに私の問題でした。私はあなたのルートモジュールを介して櫛をしてどこかのフォワードスラッシュを忘れたかどうかを確認することをお勧めします。それが動作しない場合は、ルートファイルにインポートするコンポーネントを見てください。