Question

我正在构建一项功能，如果用户闲置了一段时间，则可以将其带回促销视频。空闲模块按预期工作，但是直接传递失败，因为在URL后面未添加斜杠并引发异常，因此hashrouter失败。以下是我的应用程序类：

import React from 'react';
import './App.css';
import {createMuiTheme} from '@material-ui/core/styles';
import {ThemeProvider} from '@material-ui/styles';
import Navbar from './layout/nav';
import Content from './layout/content';
import {library} from '@fortawesome/fontawesome-svg-core';
import {faStroopwafel} from '@fortawesome/free-solid-svg-icons';
import {Route, withRouter} from 'react-router-dom';
import Dashboard from './admin/dashboard';
import TrackLoop from './layout/track-loop';
import AuthService from './auth/auth-jwt-class';
import IdleTimer from 'react-idle-timer';
import {Redirect} from "@reach/router";

library.add(faStroopwafel);

const theme = createMuiTheme({
    palette: {
        primary: {main: '#03958C'},
        secondary: {main: '#232323'},
    },

});

const creds = {
    StoreId: "S1",
    password: "q1w2e3r4"
}

const Auth = new AuthService();

export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            token: "",
            active: true,
        }
        this.idleTimer = null
        this.onAction = this._onAction.bind(this)
        this.onActive = this._onActive.bind(this)
        this.onIdle = this._onIdle.bind(this)
    }

    componentDidMount() {
        if (!Auth.loggedIn()) {
            Auth.login(creds);
        }
    }


    render() {
        if(this.state.active === false){
            return <Redirect to="/" />
        }
        return (
            <div className="App">
                <IdleTimer
                    ref={ref => {
                        this.idleTimer = ref
                    }}
                    element={document}
                    onActive={this.onActive}
                    onIdle={this.onIdle}
                    onAction={this.onAction}
                    debounce={250}
                    timeout={1000 * 5}/>
                {
                    <ThemeProvider theme={theme}>
                        <Navbar/>
                        <Route exact path="/" component={TrackLoop}/>
                        <Route path="/content" component={Content}/>
                        <Route path="/dashboard" component={Dashboard}/>
                    </ThemeProvider>
                }
            </div>
        );
    }
    _onAction(e) {
        console.log('user did something', e);
    }

    _onActive(e) {
        console.log('user is active', e);
        console.log('time remaining', this.idleTimer.getRemainingTime());
    }

    _onIdle(e) {
        console.log('user is idle', e);
        console.log('last active', this.idleTimer.getLastActiveTime());
        this.setState({
            active: false,
        })

    }
}

仅重定向到根页面将使URL呈现如下：

return <Redirect to="/" />

输出：

http://localhost:3000/

如果在其中添加哈希和结尾斜杠：

return <Redirect to="/#/" />

输出：

http://localhost:3000/#

如果我尝试逃脱最后的斜杠：

return <Redirect to="/#\/" />

输出：

http://localhost:3000/#\

我觉得这应该没那么困难，我想我正在弄乱一些东西。有人可以指出我正确的方向吗？

重定向到哈希路由器失败（反应）

0 个答案: