react router

Posted 2022-12-16 ccdat

官方文档 https://react-router.docschina.org/web/guides/quick-start

history 对象是可变的，因此我们建议从 <Route> 的渲染选项中来访问 location，而不是从 history.location 直接获取。这样做可以保证 React 在生命周期中的钩子函数正常执行，例如：

// locationChanged 将为 true
const locationChanged = nextProps.location !== this.props.location

// INCORRECT，因为 history 是可变的所以 locationChanged 将一直为 false
const locationChanged = nextProps.history.location !== this.props.history.location

 

使用总结 https://www.cnblogs.com/V587Chinese/p/11507836.html

BrowserRouter和HashRouter
这两者可以理解为路由的作用域，所有的Link组件和Route组件都必须在其内部。二者区别在于：

• BrowserRouter中的URL指向真实的url，当页面刷新（或直接操作url并回车）时，将产生指向该路径的url请求，如果服务器端没有配置该路径，则返回404。
• HashRouter中#后面的uri并不是真实的请求路径，对于后端来说，全都指向同一个地址。另外哈希历史记录不支持loaction.key和loaction.state，当通过state传递参数的时候，无法从历史记录中获取到，可能会导致页面显示异常。
• 也就是说在浏览器地址栏中直接输入 http://test.code.com/aboutBrowserRouter会匹配不了而报404（因为服务端nginx中只配置了test.code.com，BrowserRouter代码中的路由并不会被服务端识别），而 http://test.code.com/#/aboutHashRouter会正常显示about页面（因为访问的后端地址仅仅是test.code.com）。

在BrowserRouter模式下，如何在服务端配置呢？

• Nginx配置（前端项目打包），将任何URL访问都指向index.html
• 后端服务配置（前端项目打包），将任何URL访问都指向index.html
• 开启前端服务（需要进行Nginx反向代理）

Link标签和a标签，看到的效果是一样的，但我们推荐<Link>，使用它才是单页面应用，浏览器不会请求页面；而使用a标签，会重新请求页面。

导航守卫的实现（权限校验）

NavLink 和  PureComponent 一起使用的时激活链接样式不生效 https://www.cnblogs.com/wenruo/p/10321456.html

v4 v3区别及策略 https://zhuanlan.zhihu.com/p/28585911

1、嵌套布局

const PrimaryLayout = props => 
  return (
    <div className="primary-layout">
      <PrimaryHeader />
      <main>
        <Switch>
          <Route path="/" exact component=HomePage />
          <Route path="/user" component=UserSubLayout />
          <Route path="/products" component=ProductSubLayout />
          <Redirect to="/" />
        </Switch>
      </main>
    </div>
  );
;

const UserSubLayout = () =>
  <div className="user-sub-layout">
    <aside>
      <UserNav />
    </aside>
    <div className="primary-content">
      <Switch>
        <Route path="/user" exact component=BrowseUsersPage />
        <Route path="/user/:userId" component=UserProfilePage />
      </Switch>
    </div>
  </div>;

const UserSubLayout2 = props =>
  <div className="user-sub-layout">
    <aside>
      <UserNav />
    </aside>
    <div className="primary-content">
      <Switch>
        <Route path=props.match.path exact component=BrowseUsersPage />
        <Route
          path=`$props.match.path/:userId`
          component=UserProfilePage
        />
      </Switch>
    </div>
  </div>;

const UserSubLayou3 = ( match ) =>
  <div className="user-sub-layout">
    <aside>
      <UserNav />
    </aside>
    <div className="primary-content">
      <Switch>
        <Route exact path=match.path component=BrowseUsersPage />
        <Route path=`$match.path/add` component=AddUserPage />
        <Route path=`$match.path/:userId/edit` component=EditUserPage />
        <Route path=`$match.path/:userId` component=UserProfilePage />
        <Route component=NoMatch />
      </Switch>
    </div>
  </div>;
// 注意上面的route顺序，因为switch只匹配一个，需要将更精确的放到前面。另一种方式是每一个route都加exact精确匹配。

我们用 2 个 routes 替换之前的 4 个 routes
注意，这里我们没有再使用 exact，因为，我们希望 /user 可以匹配任何以 /user 开始的 route，products 同理。
使用这种策略，子布局也开始承担起了渲染 routes 的责任。避免两个 user组件页面中都有一个<UserNav />的重复渲染问题。

有一点值得注意的是，routes 需要识别它的完整路径才能匹配，为了减少我们的重复输入，我们可以使用 props.match.path来代替。match.url 是浏览器 URL 的一部分，match.path 是我们为 router 书写的路径

2、Authorized Route 路由权限控制

在应用程序中限制未登录的用户访问某些路由是非常常见的，还有对于授权和未授权的用户 UI 也可能大不一样，为了解决这样的需求，我们可以考虑为应用程序设置一个主入口，如/auth表示有权限相关操作，/app表示业务操作。
现在，我们首先会去选择应用程序在哪个顶级布局中，比如，/auth/login 和 /auth/forgot-password 肯定在 UnauthorizedLayout 中，另外，当用户登陆时，我们将判断所有的路径都有一个 /app 前缀以确保是否登录。如果用户访问 /app 开头的页面但并没有登录，我们将会重定向到登录页面。示例：

class App extends React.Component 
  render() 
    return (< Provider store=
      store
     > <BrowserRouter > <Switch > <Route path="/auth" component=
      UnauthorizedLayout
    
    />
      <AuthorizedRoute path="/app " component=PrimaryLayout />
    </Switch>
      </BrowserRouter>
    </Provider>
    )
  


class AuthorizedRoute extends React.Component 
  componentWillMount() 
    getLoggedUser();
  

  render() 
    const  component: Component, pending, logged, ...rest  = this.props;
    return (
      <Route
        ...rest
        render=props => 
          if (pending) return <div>Loading...</div>;
          return logged
            ? <Component ...this.props />
            : <Redirect to=" / auth / login " />;
        
      />
    );
  


const stateToProps = ( loggedUserState ) => (
  pending: loggedUserState.pending,
  logged: loggedUserState.logged
);

export default connect(stateToProps)(AuthorizedRoute);

另外可参考：导航守卫的实现