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

【问题标题】：React router Redirect inside a stateless functional component在无状态功能组件内反应路由器重定向
【发布时间】：2020-01-25 22:29:20
【问题描述】：

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

我创建了一个带有以下内容的 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;

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

谢谢。

【问题讨论】：

我终于找到了它及其工作原理，reacttraining.com/react-router/web/api/Hooks/usehistory const history = useHistory(); history.push(page);请让我知道这是否是正确的方法

标签： javascript reactjs typescript react-router

【解决方案1】：

您可能需要历史

import { createHashHistory } from 'history'

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

稍后导入内部文件：

import { history } from '../helpers'

将这行代码放在负责授权/身份验证的函数中——提交后——需要这行push user到路径。

history.push('/login')

【讨论】：

【解决方案2】：

要在点击时通过路由器导航，您应该将属性传递给 .为此，请更换欢迎使用：React.FC = () => { 和 const 欢迎使用：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");
 }

【讨论】：