在 React 中重定向 - 节点 [英] redirect in React - Node

问题描述

我观看了某些教程以了解如何进行路由，但它们都是理论性的，或者我无法理解它们的实现.

I watched certain tutorial to understand how to do routing but they all were theoretical or I wasn't able to understand their implementation.

有人可以通过指导我路由/重定向这个组件作为示例来帮助我，以便我也可以为其他组件设置路由.

Can someone help me by guiding me to route/re-direct this one component as an example so that I can setup routes for other components as well.

我在服务器端使用 express.js 并为客户端做出反应

I am using express.js for the server side and react for client side

在我的反应中，我像这样使用 axious 向我的服务器发送了一个请求(这发生在有状态的注册容器中)

In my react, I sent a request using axious to my server like this (this happens in stateful signup container)

 axios.post('/user', {
        emailAddress: this.state.emailAddress,
            password: this.state.password
        })
      .then((response) => {
                if (!response.data.error) {
                    console.log('successful signup')
                } else {
                    console.log('username already taken')
                }
            })
        .catch(error => {
                console.log('signup error: ')
                console.log(error)
            })

在我的服务器路由中，我将这些数据存储在我的猫鼬中，然后想要重定向到我的登录页面(或任何页面).我的服务器路由看起来像这样

In my server route, I take this data, store in my mongoose and then want to redirect to my login page (or any page). My server route looks like this

router.post("/", function(req, res) {
  console.log("user login post request");
  console.log(req.body.emailAddress)
  User.findOne({username: req.body.emailAddress}, function(err, user){
      if (err) {
        console.log('post error: ', err)

        }
      else if (user) {
        console.log("already exsist")
        res.json({
            error: 'user exsist'
        })
      }
      else {
        console.log("here new user")
        User.register(new User({username: req.body.emailAddress }), req.body.password, function(error, user){
          if (error) {
            console.log("error -> Post request from user");
            console.log(error);
          } else {
            req.logIn(user, function (err) {
             if (err) {
               return next(err);
                   }
              return res.json(user) // send whatever you want or redirect
             });

          }
        })
      }
  })
})

在 ejs 中，我们曾经做 res.render 但那是 EJS，我不做反应所以有人可以帮助我/指导设置路由，以便如果用户成功注册，那么我们可以将他重定向到登录组件.

In ejs, we used to do res.render but then that is EJS and I doesn't work on react so can someone help me/guide in setting up routes so that if user is successfully registered then we can redirect him to login component.

我至少已经做过 npm install react-router-dom --save

The least I have already done is npm install react-router-dom --save

推荐答案

在 index.js 中导入 BrowserRouter

Import BrowserRouter in your index.js

import { BrowserRouter } from 'react-router-dom';

将您的 App 组件包装到 BrowserRouter

Wrap your App component to BrowserRouter

    <BrowserRouter>
        <App />
    </BrowserRouter>

在你的 App.js 中设置路由

Set up routes in your App.js

import { Route, Switch } from 'react-router-dom';
// import your components...

<Switch>
        // Example routes...
        <Route exact path='/' component={yourMainComponent} />
        <Route exact path='/login' component={yourLoginComponent} />
        ...
</Switch>

在你的 axios 函数中你可以重定向

In your axios function you can redirect

axios.post('/user', {
    emailAddress: this.state.emailAddress,
        password: this.state.password
    })
  .then((response) => {
            if (!response.data.error) {
                console.log('successful signup')
            } else {
                console.log('username already taken')
            }

            // Redirect
            this.props.history.replace('/path-to-redirect');
        })
    .catch(error => {
            console.log('signup error: ')
            console.log(error)
        })

其他方法是使用 react-router-dom 中的 Redirect 组件.

Other approach would be to use the Redirect component from react-router-dom.

这篇关于在 React 中重定向 - 节点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！