在无状态功能组件内反应路由器重定向

Question

我是反应和开发允许用户跨页面导航的应用程序的新手。

我创建了一个 TypeScript 项目，如下所示

应用程序.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;

欢迎.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. 保持这些路由的最佳方式是什么？当用户点击浏览器的后退按钮时，它是否支持历史记录？

谢谢你。

Answer 1

你可能需要历史

import { createHashHistory } from 'history'

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

稍后导入内部文件：

import { history } from '../helpers'

将这行代码放在负责授权/身份验证的函数中 - 提交后 - 这行将用户推送到路径是需要的。

history.push('/login')

Answer 2

要在单击时通过路由器导航，您应该将属性传递给 . 为此，请将 const Welcome: React.FC = () => { 替换为 const Welcome: React.FC = (props) => {

而在 redir 方法中

 if (page === 'login'){
      // <Redirect to="/login"/>    
    } else if(page === 'about') {
        //<Redirect to="/about"/>
    } 

用

 if (page === 'login'){
    this.props.history.push("/login");
 } else if(page === 'about') {
    this.props.history.push("/about");
 }