我在我的webapp中同时使用了Express和React,因为我们正在将渲染从Handlebar迁移到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>
);
}
}
}
这是一个根组件,用于管理要转到的位置。
如何解决这个问题?我不想使用react-router来处理路由,我们希望在Express上维护所有路由。谢谢
发布于 2018-07-04 03:09:53
在客户端呈现时,您可以使用window.location.replace("/login");
,而不是设置状态来呈现<Redirect>
要模拟<Redirect push>
:window.location.href = "/login";
在服务器端,您可以继续使用<Redirect>
发布于 2018-03-01 21:29:42
您可以在子域中托管您的express应用程序:
<Redirect to="http://express.myapp.com/login" />
https://stackoverflow.com/questions/49048884
复制相似问题