React：如何在React中重定向？

114

可爱的男孩：

单击登录按钮后，将看到控制台日志输出“ Redirecting ..”。但是，没有看到“欢迎”组件。也不会记录任何错误。

import React, { useState } from 'react';
import  { Redirect } from 'react-router-dom'
import './App.css';
import { Form, Input, Button, Checkbox } from 'antd';

function App() {
  const bgstyle={
      background:"linear-gradient(to right, #11998e, #38ef7d)",
      height:"100vh",display: 'flex',  justifyContent:'center', alignItems:'center',flexDirection: 'column'
  }
  let isLoggedIn = useState(false)
  const onFinish= function onfinish(data){
    isLoggedIn = data.password=="password"?true:false
    if(isLoggedIn){
      console.log('Redirecting..')
      return <Redirect to='/Welcome/' />
    }
  }

  return (
    <div style={bgstyle}>
      <h1 style={{color:'white'}}>Welcome</h1>
      <Form onFinish={onFinish}>
        <Form.Item name="username" rules={[{ required: true, message: 'Please enter your username!' }]}>
          <Input placeholder="Username"/>       
        </Form.Item>

        <Form.Item name="password" rules={[{ required: true, message: 'Please enter your password!' }]}>
          <Input.Password placeholder="Password"/>       
        </Form.Item>

        <Button type="primary" style={{width:200,borderColor:'gray',background:'gray'}} htmlType="submit">Login</Button>
      </Form>
    </div>
  );
  }
export default App;

Welcome.js代码：

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
    <p>Welcome</p>,
  document.getElementById('root')
);

我应该使用路线吗？我想念什么？我才刚开始反应。请发布任何可能有助于我进一步了解的链接。

哈桑·拉扎（Hassan Raza）：

如果您希望重定向工作，则必须按以下所述定义路线

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import Root from './root'

ReactDOM.render(
  <Root />,
  document.getElementById('root')
);

Root.js：

import React from 'react'
import {Route, BrowserRouter, Switch} from 'react-router-dom'
import LoginComponent from './component/LoginComponent'; 
import WelcomeComponent from './component/WelcomeComponent';
import NotFoundPage from './NotFoundPage'

export default = () => {
    return (
      <BrowserRouter>
       <Switch>
        <Route exact={true} path={'/Welcome'} component={WelcomeComponent}/>
        <Route exact={true} path={'/Login'} component={LoginComponent}/>
        <Route component={NotFoundPage} />
       <Switch>
      <BrowserRouter/>
    )
}

之后，您的重定向应该可以正常工作了，您也可以使用第一个答案中提到的{usehistory}

另外，请检查此选项，以使用不同版本的React Router以编程方式进行导航，但首先，您必须实现上述路由。

您可以在https://reactrouter.com/web/guides/quick-start上获取更多信息

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。