Question

我看过某些教程以了解如何进行路由，但是它们都是理论上的，否则我无法理解其实现。

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

我在服务器端使用express.js并在客户端使用

在我的反应中，我使用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)
            })

在我的服务器路由中，我获取这些数据，将其存储在猫鼬中，然后想要重定向到我的登录页面（或任何页面）。我的服务器路由如下所示

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，我不做任何反应，因此有人可以帮助我/指导设置路线，以便如果用户成功注册，我们可以将他重定向到登录组件。

我至少已经做过的事情是npm install react-router-dom --save

Answer 1

根据您从服务器收到的消息，可以设置状态，并可以进行相应的重定向。

您可以在要渲染的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} />}

有关详细信息，请参见此处：Link

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

详细信息：Link

Answer 2

将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组件。

在React中重定向-节点

2 个答案: