javascript - 在无状态功能组件中进行React Router Redirect

我是新来做出反应的人，正在开发一个允许用户在页面之间导航的应用程序。

我创建了一个TypeScript项目，内容如下


  App.tsx

import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Login from './login';
import Welcome from "./welcome";
import About from './about';

const RedirectRoute = (props) => {
    // if (!authenticated) {

    // }
    return <Route {...props} />
}

const App: React.FC = () => {

    return (
        <BrowserRouter>
            <div>
                <Switch>
                    <RedirectRoute path="/" component={Welcome} exact/>
                    <RedirectRoute path="/login" component={Login} exact/>
                    <RedirectRoute path="/about" component={About} exact/>
                </Switch>
            </div>
        </BrowserRouter>
    );
};

export default App;

  welcome.tsx

import React from 'react';
import {Redirect} from 'react-router-dom';
import {Button} from 'antd';
import Login from './login';
import About from './about';

const Welcome: React.FC = () => {
    const redir = (page: string) => {
        console.log('Page:', page);
        if (page === 'login'){
          // <Redirect to="/login"/>
        } else if(page === 'about') {
            //<Redirect to="/about"/>
        }
    }

    return (
         <div style={{textAlign: 'center'}}>
            <div style={{display:'inline-block'}}>

                    <Button
                        key="login"
                        type="primary"
                        onClick={() => redir('login')}
                    >Login Page</Button>

                    <Button
                        key="about"
                        type="primary"
                        style={{marginTop:'20px'}}
                        onClick={() => redir('about')}
                    >Navigation Bar</Button>

            </div>
        </div>
    );
}

export default Welcome;

  关于.tsx

import React from "react";

const About: React.FC = () => {
  return <div>About Page</div>;
};

export default About;

  登录

import React from 'react';

const Login: React.FC = () => {
  return (
    <div>Login Page</div>
  );
}

export default Login;

基于App.tsx页面中的路由配置加载正常（localhost：3000 / about或localhost：3000 / login和localhost：3000 /）

但是，当我尝试单击按钮时重定向到页面时会发生问题（在我的实际情况下，登录成功后，我必须导航到欢迎页面）。

由于我感到困惑，请尽可能澄清以下问题：
1.登陆页面时，路由工作正常，当我想通过代码和URL重定向到页面时，如何管理路由应该有所体现。
2.保留此类路由的最佳方法是什么，当用户单击浏览器的后退按钮时，它将支持历史记录吗？

谢谢。

最佳答案

您可能需要历史

import { createHashHistory } from 'history'

export const history = createHashHistory({
    hashType: 'hashbang'
})

稍后导入内部文件：

import { history } from '../helpers'

将这行代码放入负责授权/身份验证的功能内（在提交之后），该行需要将用户推送到该路径。

history.push('/login')

关于javascript - 在无状态功能组件中进行React Router Redirect，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59913974/