Question

我还是React的新手，我正在试图弄清楚如何结合客户端和服务器端渲染。目前，我在使用Client Side渲染时使用node.js获取数据，如下所示：

const path    = require('path');
const express = require('express');
const app     = express();
const publicPath = path.join(__dirname, '..', 'public');

app.use(express.static(publicPath));

app.get('/', (req, res) => {
    res.sendFile(path.join(publicPath, 'index.html'));
});

app.get('/add', (req, res) => {
    return res.json({ data: 'test' });
});

在组件类中：

class Add extends React.Component {
state = {
    data: ''
}

componentDidMount()
{
    fetch('http://localhost:3000/add')
    .then((response) => response.json())
    .then((response) => {
        this.setState(() => ({
            data: response.data
        }));
    })
    .catch((error) => console.log(error))
}

render()
{
    return (
        <div>
            <p>{this.state.data}</p>
        </div>
    );
}  
}

因此，当我使用客户端渲染时转到/添加路由(http://localhost:3000/add)时，JSON数据会被取出并显示在<p>标记中。但是当我刷新页面或手动输入/添加URL时，所有显示的都是屏幕上的原始JSON输出，而不加载任何组件。

如果用户刷新或手动转到/添加路由，如何在<p>中显示提取的数据？欢迎任何有关如何使这项工作更好的提示。

这里我为客户端渲染设置了historyApiFallback：

devServer: {
    contentBase: path.join(__dirname, 'public'),
    historyApiFallback: true,
}

路由：

const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Header />
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/add" component={Add} />
                <Route component={NotFound} />
            </Switch>
            <Footer />
        </div>
    </BrowserRouter>
);

React Client Side使用fetch渲染加载数据

0 个答案: