陣營服務器端渲染應用程序 - 如何更新元數據

我目前正在建設一個反應程序時遇到的一些問題...陣營服務器端渲染應用程序 - 如何更新元數據

我已經配置使用下面的代碼我的網頁的服務器端渲染.. 。

const router = express.Router(); 

router.get('/homepage', (req, res) => { 
    match({routes, location: req.originalUrl}, (err, redirectLocation, renderProps) => { 
     if(!err) { 
      const html = this.render(renderProps); 
      const data = {}; 

      res.render('index', { 
       content: html, 
       context: data, 
       pageTitle: 'Homepage Title' 
      }); 
     } else { 
      res.status(500).send(); 
     } 
    }); 
}); 

router.get('/contact', (req, res) => { 
    match({routes, location: req.originalUrl}, (err, redirectLocation, renderProps) => { 
     if(!err) { 
      const html = this.render(renderProps); 
      const data = {}; 

      res.render('index', { 
       content: html, 
       context: data, 
       pageTitle: 'Contact Us' 
      }); 
     } else { 
      res.status(500).send(); 
     } 
    }); 
}); 

return router;

其中「指數」是我的看法的名字......

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<link rel="shortcut icon" href="/assets/favicon.ico?v=004" type="image/x-icon" /> 
<title>{{{pageTitle}}}</title> 
<link rel="stylesheet" href="/assets/css/main.css"> 
</head> 
<body> 
    <div data-ui-role="content">{{{content}}}</div> 
    <script>window.APP_STATE = {{{context}}};</script> 
    <script src="/assets/js/app.js" defer></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/react-router/1.0.0/ReactRouter.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/history/1.12.6/History.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/<version>/react-bootstrap.min.js"></script> 
</body> 
</html>

的PAGETITLE正確渲染，如果我定位到兩個獨立的單獨頁面，但是當如果我來回錨一頁到另一頁（即使用<a href="/contact">Contact Us</a>）客戶端上的pageTitle不會更改，並且仍會顯示'首頁標題'

如何確保客戶端上的pageTitle更改？

任何幫助，非常感謝。

來源

2017-04-26 Phil

與您的OP沒有關係，但您可能需要考慮服務器上的所有請求的通用路由，以允許react-router更簡單地工作。 'router.get（'/ *'，（req，res）=> {match（....}' –

我確實考慮過這個問題，但我仍然需要從服務器提供頁面標題，所以不能使它成爲通用的。現在你的答案有效，我應該可以做到這一點。 – Phil

當您進行客戶端導航時，您需要使用document.title手動更新頁面的標題。服務器只會在進行新的頁面請求時注入標題。

比方說，這是接觸組件...

class Contact extends React.Component { 
 

 
    componentDidMount() { 
 
    // this only executes on the browser, not server 
 
    document.title = 'Contact Page'; 
 
    } 
 
    
 
    // you could also use this to inject props 
 
    componentWillReceiveProps(nextProps) { 
 
    document.title = `Contact Page - ${nextProps.someValue}`; 
 
    } 
 
    
 
    render() { 
 
    ... 
 
    } 
 
}

也有開源的組件，可以爲你做這個，像react-document-title。

來源

2017-04-26 15:55:03

非常感謝！ – Phil

陣營服務器端渲染應用程序 - 如何更新元數據

回答

相關問題