未使用 React Router 的重定向到安装组件

大佬教程收集整理的这篇文章主要介绍了未使用 React Router 的重定向到安装组件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决未使用 React Router 的重定向到安装组件？

即使我能够走这条路线，与 /login 路线关联的登录组件也没有安装。我在下面添加了总共 5 个组件（App、Login、Auth、Layout3、topbar）的代码。对于 Auth 组件，我正在使用 'react-token'auth' 包。如果您有任何问题，请告诉我，代码可能看起来很多。但是您可以专注于 topbar 组件的代码，因为这是我重定向到登录路由的地方。当然，在 App 组件中，我已经添加了 Login 的路由。因此 topbar 和 App 组件可能存在问题。

这是我为我的应用程序定义所有路由的 App 组件。

  class App extends Component {
  render() {
  <StylesProvIDer injectFirst>
    <div>
      <browserRouter>
        <Switch>
          <Route exact path='/login' component={Login} />
          <Route exact path='/' component={Layout3} />
        </Switch>
      </browserRouter>
    </div>
  </StylesProvIDer>
  }

现在，这是登录组件。在这里，如果用户登录，他将被重定向到 '/' 路由，即 Layout3 组件。但如果此人未登录，则会显示登录页面。我已经在返回中添加了逻辑。 UseAuth() 指向我从 react-token-auth 包中导入 createauthprovIDer 的 Auth.Js 文件。

export default function Login(props) {
const [username,setUsername] = useState('')
const [password,setpassword] = useState('')
const [loggedIn,setLoggedIn] = useState(false)

const onsubmitClick = (E) => {
    e.preventDefault()
    console.log("You pressed login")
    let opts = {
        'username': username,'password': password
    }
    console.log(opts)
    fetch('/API/login',{
        method: 'post',body: JsON.Stringify(opts)
    }).then(r => r.Json())
        .then(token => {
            if (token.access_token) {
                login(token)
                // setLoggedIn(true)

                console.log(token)
            }
            else {
                console.log("Please type in correct username/password")
            }
        })
}

const handleUsernameChange = (E) => {
    setUsername(e.target.value)
}

const handlepasswordChange = (E) => {
    setpassword(e.target.value)
}

const [logged] = useAuth();

console.log('logged or not: ',logged);

return (
    <div style={{
        BACkgroundcolor: 'white',height: '100%',display: 'flex',flexDirection: 'column',alignItems: 'center'
    }}>

        {!logged ?
            <>
                <h1>Please Log In</h1>
                <form>
                    <label>
                        <p>Username</p>
                        <input type="text"
                            onChange={handleUsernameChangE}
                        />
                    </label>
                    <label>
                        <p>password</p>
                        <input type="password"
                            onChange={handlepasswordChangE}
                        />
                    </label>
                    <div>
                        <button
                            type="submit"
                            onClick={onsubmitClick}
                        >submit</button>
                    </div>
                </form>
            </>
            :
            <>
                <Redirect to='/' push={truE} />
            </>
        }
    </div>
)
}

这是我说的 Auth.Js 文件。

  import { createauthprovIDer } from 'react-token-auth';


export const [useAuth,authFetch,login,logout] =
createauthprovIDer({
    accesstokenKey: 'access_token',onupdatetoken: (token) => fetch('/API/refresh',{
        method: 'POST',body: token.access_token
    })
        .then(r => r.Json())
});

这是 Layout3 组件，我将在其中有条件地转到 Layout3 组件或登录组件。

   class Layout3 extends Component {

state = {
    authmessage: '',loginStatus: false
}

componentDIDMount() {
    authFetch("/API/protected").then(response => {
        console.log('response insIDe authenticationFetch: ',responsE)
        if (response.status === 401) {
            this.setState({ authmessage: response.status })
            return null
        }
        return response.Json()
    }).then(response => {
        if (response && response.messagE) {
            this.setState({ authmessage: response.message })
        }
    })
}

  render() {

    return (
        <>
            {
                this.state.authmessage === 401 ?
                    <>
                        <browserRouter>
                            <Redirect to='/login' />
                        </browserRouter>
                    </>
                    :
                    <>
                        <browserRouter>
                            <Switch>
                                <Route exact path='/'>
                                <topbar/>
                            </Switch>
                        </browserRouter>
                    </>
                  }
               </>...

最后，这是退出按钮所在的 topbar。

 class topbar extends Component {
     state = {
        loggedOut: false
      }

 dashboardlogout = () => {
    this.setState({ loggedOut: true });
 }

  render() {

    console.log('state insIDe topbar ',this.state.loggedOut)
    if (this.state.loggedOut === truE) {
        logout()
        return (
            <Redirect from="/" to="/login" push={truE} />
        )
    }
    return(
       <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <button onClick={this.dashboardlogout}>
                            <i class="fa fa-sign-out"></i> Log out
                        </button>
                    </li>
                </ul>
      );
   }
   }
 

解决方法

import { createauthprovider } from "react-token-auth";

export const useauthprovider = createauthprovider({
  accessTokenKey: "access_token",onupdateToken: (token) =>
    fetch("/api/refresh",{
      method: "POST",body: token.access_token
    }).then((r) => r.json())
});

const [useAuth,logout] = useauthprovider();
const [logged] = useAuth();

大佬总结

以上是大佬教程为你收集整理的未使用 React Router 的重定向到安装组件全部内容，希望文章能够帮你解决未使用 React Router 的重定向到安装组件所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。