我正在为我的 webapp 使用 Express 和 React，因为我们正在将渲染从 Handlebars 迁移到 React。但是我们想要在 Express 中维护逻辑并仅在 React 中渲染。问题是当我想要重定向时。这是带有逻辑的 client.js：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import { BrowserRouter } from "react-router-dom";
// In production, we want to hydrate instead of render
// because of the server-rendering
if (process.env.NODE_ENV === 'production') {
ReactDOM.hydrate(
<BrowserRouter>
<App {...window.__APP_INITIAL_STATE__} />
</BrowserRouter>
, document.getElementById('app'));
} else {
ReactDOM.render(
<BrowserRouter>
<App {...window.__APP_INITIAL_STATE__} />
</BrowserRouter>
, document.getElementById('app'));
}
// Hot reload is that easy with Parcel
if (module.hot) {
module.hot.accept();
}
这是 Express 的简单路径：
app.get('/signup', (req,res)=>{
const initialState = {component:'SignUp'};
let context = {};
const markup = ReactDOM.renderToString(
<StaticRouter location={req.url} context={context}>
<App {...initialState} />
</StaticRouter>
);
if (context.url) {
res.writeHead(302, {
Location: context.url
});
res.end();
}
else {
res.send(generateHtml(markup,initialState));
}
});
问题是：当我尝试像这样重定向(并更改 this.state.redirect)时：
render(){
return this.state.redirect ? <Redirect to="/login" /> :(
<div className="ro">HI </div> );
}
浏览器转到/login 路径，但没有调用服务器。它简单显示一个空白页面。
这也是我的 App 组件：
export default class App extends Component {
constructor(props){
super(props);
console.log(props);
}
render(){
if(this.props.component === 'Root'){
return <Root />;
}
else if(this.props.component === 'Login'){
return <Login />;
}
else if(this.props.component === 'SignUp'){
return <SignUp />;
}
else{
return (
<div>
<h1>Hello word {this.props.component}</h1>
<Button color="danger">Danger!</Button>
</div>
);
}
}
}
这是一个管理去向的 Root 组件。
如何解决这个问题？我不想使用 react-router 来处理路由，我们希望维护所有的 Express。谢谢
2 回答
当 client-side 渲染时，你可以
window.location.replace("/login");而不是设置状态来渲染<Redirect>模拟
<Redirect push>：window.location.href = "/login";在 server-side 上，您可以继续使用
<Redirect>您可以在子域上托管您的快速应用：