ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route component={Layout}>
<Route path='/' component={Phones}/>
<Route path='/categories/:id' component={Phones}/>
</Route>
<Route path='/phones/:id' component={Phone}/>
</Router>
</Provider>,
document.getElementById('root')
);const Categories = ({categories, activeCategoryId}) => {
const renderCategory = (category, index) => {
const getActiveState = R.propEq('id', activeCategoryId)
const linkClass = classNames({
'list-group-item': true,
'active': getActiveState(category)
})
return (
<Link
to={`/categories/${category.id}`}
className={linkClass}
key={index}
>
{category.name}
</Link>
)
}
const renderAllCategory = () => {
const linkClass = classNames({
'list-group-item': true,
'active': R.isNil(activeCategoryId)
})
return (
<Link
to='/'
className={linkClass}
>
All
</Link>
)
}
return (
<div className='well'>
<h4>Brand</h4>
<div className='list-group'>
{renderAllCategory()}
{categories.map((category, index) => renderCategory(category, index))}
</div>
</div>
)
}
const mapStateToProps = (state, ownProps) => ({
categories: getCategories(state),
activeCategoryId: getActiveCategoryId(ownProps)
})
export default compose(
withRouter,
connect(mapStateToProps, null)
)(Categories)const Content = match => {
console.log(match);
return (
<div className="content">
<Route component={Home} path="/" />
<Route component={NewsPage} path="/news" />
</div>
);
};
const Header = () => (
<div className="header">
<div className="registration-box">
<Link className="btn sign-in" to="/sign-in">
Sign in
</Link>
</div>
</div>
<div className="nav">
<nav className="main-nav">
<NavLink activeClassName="active" exact to="/">
Главная
</NavLink>
<NavLink to="/news">Новости</NavLink>
</nav>
</div>
</div>
);
const App = () => (
<MainLayout>
<Header />
<Content />
</MainLayout>
);
const MainLayout = ({children}) => {
console.log(children);
return <div className="wrapper-app">{children}</div>;
};
ReactDOM.render(
<Router>
<div className="">
<Route component={App} path="/" />
<Route component={SignIn} path="/sign-in" />
</div>
</Router>,
document.querySelector('.root'),
);ReactDOM.render(
<Router>
<div className="">
<Switch>
<Route component={App} path="/" />
<Route component={SignIn} path="/sign-in" />
</Switch>
</div>
</Router>,
document.querySelector('.root'),
);ReactDOM.render(
<Router>
<div className="">
<Switch>
<Route component={App} exact path="/" />
<Route component={SignIn} exact path="/sign-in" />
</Switch>
</div>
</Router>,
document.querySelector('.root'),
);saveNewTrackName() {
const props = this.props;
const track = this.state.track;
props.onChangeTrack(track);
}}else if (action.type === 'CHANGE_TRACK'){
const newState = state.filter(obj => obj.id !== action.track.id);
return [
...newState,
action.track,
];
}import {combineReducers}from 'redux';
import tracks from './tracks';
import playlists from './playlist';
import filterTracks from './filterTracks';
export default combineReducers({
tracks,
playlists,
filterTracks,
});const initialState = [];
export default function playList(state = initialState, action){
if (action.type === 'ADD_TRACK'){
// console.log('add_track');
return [
...state,
action.payload,
];
}else if (action.type === 'DELETE_TRACK'){
return state.filter(obj => obj.id !== action.payload);
}else if (action.type === 'CANGE_TRACK'){
return state;
}
return state;
}<?php
/**
* Template Name: Продуктовая страница
*/
get_header(); ?>
<h1>заголовок</h1>
<p><?php the_field('scr_text_8'); ?></p>
<?php get_footer();<?php
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/page/content', 'page' );
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;
endwhile; // End of the loop.
?>
в ownProps пришел объект и содержащий этот id после того как он нажимал на Link в этом же компоненте.
Попробую воспользоваться NavLink, думаю это то, что мне нужно для подсветки активного пункта категории.