Question

我目前正在构建一个反应应用程序并且遇到了一些问题...

我已使用以下代码配置了我的页面的服务器端呈现...

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;

其中'index'是我的观点的名称......

<!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更改？

非常感谢任何帮助。

Answer 1

当您进行客户端导航时，您需要使用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。

React Server Side Rendering App - 如何更新元数据

1 个答案: