在無狀態功能組件內反應路由器重定向

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");
 }