在 React 中重定向 - 节点

IT技术 node.js reactjs react-router
2021-04-26 10:35:39

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

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

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

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

 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)
            })

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

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,我不从事react所以有人可以帮助我/指导设置路由,以便如果用户成功注册,那么我们可以将他重定向到登录组件。

我已经做的最少的是 npm install react-router-dom --save

2个回答

根据您从服务器获得的消息,您可以设置一个状态,并可以相应地重定向。

您可以将此代码包含在您正在渲染的 react 组件中:

import { Redirect } from 'react-router';

//Initializing the state:
constructor(props) {
    super(props);
    this.state = {
        fireRedirect: false
    };
}

//Setting state as message received from server:
if (!response.data.error) {
    console.log('successful signup');
    this.setState({
        fireRedirect: true
    });
}

//Include this code snippet inside render block
{this.state.fireRedirect && <Redirect to='/dashboard' push={true} />}

有关详细信息,请参阅此处:链接

//For handling of routes you can include similar code in index.js / App.js
<Route exact path="/dashboard" 
       render={() => <Dashboard/>} /> 

详细信息:链接

导入BrowserRouter你的 index.js

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

将您的 App 组件包装到 BrowserRouter

    <BrowserRouter>
        <App />
    </BrowserRouter>

在你的 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 函数中,您可以重定向

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)
        })

其他方法是使用Redirect来自react-router-dom.