代码之家 › 专栏 › 技术社区 › AFC

ReactJS和React router中的条件路由和条件渲染

react-router reactjs

AFC · 技术社区 · 6 年前

我有一个问题,我试着在网上查找,但找不到我需要的东西,但这可能是因为我无法正确表达我的问题。

我有一个React项目,我正在整合,我想为人们提供用户配置文件页面。这是我到目前为止的情况。

<Route path="/profile/:user" render={(routeProps) => (<Profile {...routeProps} {...this.state} /> )}/>

这在我的索引中。js,为不同的用户设置我的个人资料页面的路由,下面是我的个人资料页面的内容

import React from 'react';
import ReactDOM from 'react-dom';
import { NavLink } from 'react-router-dom';

export class Profile extends React.Component{
    constructor(props){
        super(props);
        this.state={
            user: this.props.user,
            fullname: this.props.fullname,
            picture: this.props.picture
        };
    }
    render(){
        return(
            <h1>{this.state.fullname}</h1>      
        );
    }
}

现在我的问题是。我希望配置文件页面仅在URL与状态中“user”给定的用户ID匹配时加载和呈现用户全名

在我的索引中。js我有硬编码的user和fullname值来测试这个,它们的设置如下

constructor(props){
        super(props);
        this.state = {
            user:"AFC12345",
            fullname:"Bob Ross"
        };

我只想在访问时呈现个人资料页“ http://localhost:8080/#/Profile/AFC12345 “当前,它会为我转到的任何“profile/xxxx”呈现profile页面。

2 回复 | 直到 6 年前

soupette 6 年前

另一种方法是考虑 Profile 容器作为受保护的URL,并使用与身份验证流相同的动态。

import React from 'react';
import { Redirect } from 'react-router-dom';

const ProtectedProfile = ({ component: Component, ...rest }) => (
  <Route {...rest} render={ props => (
     props.user === props.match.params.user ? (
      <Component {...props} /> ) : (
       <Redirect to={{ pathname: '/404' }} /> )
      )} />
 );

然后在你的应用程序/索引中。js公司

 <ProtectedProfile path="/profile/:user" component={Profile} />

Femi Oni 6 年前

我会在渲染函数中执行类似的操作

let viewToRender

if (this.state.user === this.props.match.params.user) {
  viewToRender = <p>{this.state.fullname}</p>
}else{
  viewToRender = <p>Ids don't match</p>
}
....
return (){ viewToRender }

推荐文章