Question

我同时使用Express和React作为我的webapp，因为我们正在将渲染从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> );
}

浏览器转到/登录路径，但不调用服务器。它很简单，显示一个空白页面。

这也是我的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。感谢

Answer 1

在客户端呈现时，您可以<Redirect>

来代替设置状态以呈现window.location.replace("/login");

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

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

Answer 2

您可以在子域名托管您的快递应用程序：

<Redirect to="http://express.myapp.com/login" />

React-router如何重定向到Express GET

2 个答案: