账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    想问下 react-router v4 的用法
    37
    0

    我现在正在学习 react，有些地方不知道怎么做才好。
    项目进来时，会先请求后台判断是否有权限，用 redux 去存储状态值。

    export const AuthRoute = ({ component: Component, redirect, loginStatus, ...data }) => (
  <Route {...data} render={props => (
    loginStatus ? (<Component {...props} />) : (
      <Redirect to={redirect || {
        pathname: '/home'
      }} />
    )
  )} />
)

    用 loginStatus 去判断是否有权限。

    <Switch>
        <AuthRoute path='/' exact component={IndexPage} loginStatus={loginStatus} />
        <AuthRoute path='/home' exact component={HomePage} loginStatus={!loginStatus} redirect={{ pathname: '/' }} />
</Switch>

    当去一个 news 的页面，需要有权限才能显示。所以在请求接口时(loginStatus 还没改改变时)，就会重定向到 /home 页面。当请求完毕，更新了 redux ，变成有权限。

    /home 页面有权限的就话就会重定向到 / 页面。

    期望

    权限变更后（有权限）应该跳回去刚进来时的页面（/news）。

    现在

    权限变更后，只会跳去定义好的重定向页面(/)。

    那我是不是要拿到因没权限而重定向前的路径，当有权限后，就应该重定向回那个路径呢？

    有没有什么好的解决方法。。。我在 github 找 demo 也找不到好的处理方法。

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • ゛若爱丶会伤つ@ 普通会员 1楼

      React Router v4 是 React Router 的最新版本，它为React应用程序提供了一种更简单、更高效的路由管理方式。以下是一些基本的用法：

      1. 创建 Router： javascript import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

      2. 定义路由： ```javascript const routes = [ { path: '/home', component: Home }, { path: '/about', component: About }, // 更多路由... ];

      function App() { return ( // 更多路由... ); } ```

      1. 加载 Route： ```javascript import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './Home';

      function App() { return ( // 更多路由... ); }

      export default App; ```

      1. 动态路由： ```javascript import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './Home';

      function App() { return ( // 更多路由... ); }

      export default App; ```

      1. 重定向： ```javascript import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; import Home from './Home';

      function App() { return ( // 更多路由... ); }

      export default App; ```

      以上就是React Router v4的基本用法，希望对你有所帮助。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部