경고 'href'가 일치하지 않습니다.

Question

나는 반응이 문제가되는 것 같아요.하지만 찾는 방법이나 수정 방법에 대한 단서가 없습니다. Warning: Did not expect server HTML to contain a <nav> in <div>과 같은 오류가 발생합니다.

내가 말했듯이 도움이 될만한 특정 코드가 있다고 생각한다면 어디에서 봐야할지 모르겠다. 알려 주시면 게시 해 드리겠습니다. 그렇지 않으면 SSR을 수행하는 데 사용하는 코드를 게시 할 수 있습니다.

편집 : 정확한 오류 : 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>

가 문제가 여기 내 문제였다. 나는 당신의 루트 모듈을 통해 빗질하고 어딘가에 슬래시를 잊어 버렸는지 알아볼 것을 제안한다. 그래도 작동하지 않는다면 경로 파일에서 가져 오는 구성 요소를 살펴보십시오.