Case 2: Share rendering only, yet business login behind is different

// ./app/components/Profile/_ProfileLayout.js
const Presenter = ({name, age, clazz, children}) => (
    <div>
        <span class="name">{name}</span>
        <span class="age">{age}</span>
        <span class="clazz">{clazz}</span>
        {...children}
    </div>
)

const Translated = translate('AcccountViewer')(Presenter);

export default Translated;

// ./app/components/Profile/StudentProfile.js

import ProfileLayout from './_ProfileLayout';
import { goToClub } from '../actions';
import { getStudentByProfileId } from '../selectors';

const Presenter = ({clubs_joined, t, goToClub}) => (
    <ProfileLayout>
        {clubs_joined && clubs_joined.map((club) =>
            <Link onClick={() => goToClub(club)}>
                <span>{t('JOIN_A_CLUB', club)}</span>
            </Link>
        )}
    </ProfileLayout>
)

// const Translated = translate('AcccountViewer')(Presenter);

const mapDispatchToProps = (dispatch, props) => {
    goToClub: bind(goToClub, dispatch)
}

const Provided = connect(mapDispatchToProps)(Presenter);

// Pure rendering-oriented component prepared for further enhancement
export const ProvidedStudentProfile = Provided;

const mapStateToProps = (state, props) => {
    let student = getStudentByProfileId(state, props)
    return { ...student }
}

const Connected = connect(mapStateToProps)(Provided);

export default Connected;

// ./app/components/Profile/TeacherProfile.js

import ProfileLayout from './_ProfileLayout';
import { getTeacherByProfileId } from '../selectors';

const Presenter = ({subjects_taught, t}) => (
    <ProfileLayout>
        {subjects_taught && subjects_taught.map((subject) =>
            <span>{t('TEACH_A_SUBJECT', subject)}</span>
        )}
    </ProfileLayout>
)

// const Translated = translate('AcccountViewer')(Presenter);

// Pure rendering-oriented component prepared for further enhancement
export const ProvidedTeacherProfile = Presenter;

const mapStateToProps = (state, props) => {
    let teacher = getTeacherByProfileId(state, props)
    return { ...teacher }
}

const Connected = connect(mapStateToProps)(Presenter);

export default Connected;

// ./app/components/Profile/AutodetectedProfile.js

import { ProvidedTeacherProfile } from './TeacherProfile';
import { ProvidedStudentProfile } from './StudentProfile';
import { getMyProfile } from './selectors';

const Presenter = ({job_title, ...props}) => {
    switch (job_title) {
        case 'teacher';
            return <ProvidedTeacherProfile {...props}/>;
        case 'student':
            return <ProvidedStudentProfile {...props}/>;
        default: 
            return <div>{t('UNKNOWN_JOB_TITLE')}</div>
    }
}

// const Translated = translate('AcccountViewer')(Presenter);

const mapStateToProps = (state, props) => {
    let me = getMyProfile(state); // { job_title, ...student_or_teacher }
    return { ...me }
}

const Connected = connect(mapStateToProps)(Presenter);

export default Connected;

// ./app/components/Profile/index.js

export TeacherProfile from './TeacherProfile';
export StudentProfile from './StudentProfile';
export MyProfile from './AutodetectedProfile';

// ./app/routes/index.js

import { StudentProfile, TeacherProfile, MyProfile } from '../components/Profile';

const RootRouter = () => (
    <Router>
        <Route path='/me' component={MyProfile}/>
        <Route path='/teacher/:profile_id' component={TeacherProfile}/>
        <Route path='/student/:profile_id' component={StudentProfile}/>
    </Router>
)

Up to this point, we see some business logic behind is shared, like const Translated = translate('AcccountViewer')(Presenter);, and no change is observed across all components

Secondly, since profile-id _is used instead of _teacher-id or student-id, we probably consider same selector is to be utilised in place