首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >React-router如何重定向到Express GET

React-router如何重定向到Express GET
EN

Stack Overflow用户
提问于 2018-03-01 19:35:29
回答 2查看 1.2K关注 0票数 1

我在我的webapp中同时使用了Express和React,因为我们正在将渲染从Handlebar迁移到React。然而,我们希望在Express中维护逻辑,并且只在React中呈现。问题是当我想做重定向的时候。这是包含以下逻辑的client.js:

代码语言:javascript
复制
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的一个简单路径:

代码语言:javascript
复制
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)时:

代码语言:javascript
复制
render(){
    return this.state.redirect ? <Redirect to="/login" /> :(
    <div className="ro">HI </div> );
}

浏览器转到/login路径,但不调用服务器。它简单地显示了一个空白页面。

这也是我的App组件:

代码语言:javascript
复制
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上维护所有路由。谢谢

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-07-04 03:09:53

在客户端呈现时,您可以使用window.location.replace("/login");,而不是设置状态来呈现<Redirect>

要模拟<Redirect push>window.location.href = "/login";

在服务器端,您可以继续使用<Redirect>

票数 1
EN

Stack Overflow用户

发布于 2018-03-01 21:29:42

您可以在子域中托管您的express应用程序:

代码语言:javascript
复制
<Redirect to="http://express.myapp.com/login" />
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/49048884

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档