App
<BrowserRouter>
<header className="header">
<div className="container">
<div className="header__row">
<NavLink to="/">
<img src={require("./assets/img/logo.svg")} alt="Triangle" />
</NavLink>
<nav className="menu hidden">
<li className="menu__item">
<NavLink
to="/"
className="menu__link"
activeClassName="active"
exact
>
Home
</NavLink>
</li>
<li className="menu__item">
<NavLink
to="/news"
className="menu__link"
activeClassName="active"
>
News
</NavLink>
</li>
<li className="menu__item">
<NavLink
to="/musics"
className="menu__link"
activeClassName="active"
>
Musics
</NavLink>
</li>
<li className="menu__item">
<NavLink
to="/media"
className="menu__link"
activeClassName="active"
>
Media
</NavLink>
</li>
</nav>
<BgAudio />
<button
className="hamburger"
onClick={() =>
this.setState({
openDropdown: !this.state.openDropdown
})
}
style={{
background: `url(${require(`./assets/img/${
this.openDropdown ? "cross" : "hamburger"
}.svg`)}) no-repeat center`
}}
></button>
</div>
</div>
</header>
{this.state.openDropdown ? (
<div className="dropdown">
<nav className="menu">
<li className="menu__item">
<NavLink
to="/"
className="menu__link"
activeClassName="active"
exact
>
Home
</NavLink>
</li>
<li className="menu__item">
<NavLink
to="/news"
className="menu__link"
activeClassName="active"
>
News
</NavLink>
</li>
<li className="menu__item">
<NavLink
to="/musics"
className="menu__link"
activeClassName="active"
>
Musics
</NavLink>
</li>
<li className="menu__item">
<NavLink
to="/media"
className="menu__link"
activeClassName="active"
>
Media
</NavLink>
</li>
</nav>
</div>
) : null}
<div className="App">
<Switch>
<Route path="/" component={Home} exact />
<Route path="/news" component={News} />
<Route path="/news/:id" component={NewsPost} />
</Switch>
</div>
{this.state.showScrollBtn ? <button className="scroll"></button> : null}
</BrowserRouter>
News
import React from "react";
import { NavLink } from "react-router-dom";
export class News extends React.Component {
constructor(props) {
super(props);
this.state = {
news: null
};
}
componentDidMount() {
fetch("./db/db.json")
.then(response => response.json())
.then(data => {
this.newsList = data.news;
this.setState({ news: data.news.slice(0, 10) });
});
window.addEventListener("scroll", () => {
const root = document.documentElement || document.body;
if (
root.scrollTop + window.innerHeight === root.offsetHeight &&
this.state.news.length < this.newsList.length
)
this.state.news.push(
this.newsList.slice(
this.state.news.length,
this.state.news.length + 3
)[0]
);
});
}
render() {
return (
<section className="news">
<div className="container">
<ul className="news__list">
{this.state.news ? (
this.state.news.map(post => (
<li className="news__card" key={post.id}>
<NavLink to={`/news/${post.id}`} className="news__head fill">
<img
src={require(`../assets/img/${post.imgSm}`)}
className="full-width"
alt=""
/>
</NavLink>
<NavLink
className="news__card-title news__title"
to={`/news/${post.id}`}
>
{post.title}
</NavLink>
<p className="news__txt">{post.date}</p>
</li>
))
) : (
<p className="loading">Loading...</p>
)}
</ul>
</div>
</section>
);
}
}
NewsPost
import React from "react";
import { NavLink } from "react-router-dom";
export class NewsPost extends React.Component {
constructor(props) {
super(props);
this.state = {
news: null
};
}
componentDidMount() {
fetch("./db/db.json")
.then(response => response.json())
.then(data => {
this.newsList = data.news;
this.newsPost = data.news.filter(e => e.id === 1)[0];
this.setState({
news: data.news.filter(e => e.id !== 1).slice(0, 10)
});
});
window.addEventListener("scroll", () => {
const root = document.documentElement || document.body;
if (
root.scrollTop + window.innerHeight === root.offsetHeight &&
this.state.news.length + 1 < this.newsList.length
)
this.state.news.push(
this.newsList.slice(
this.state.news.length,
this.state.news.length + 3
)[0]
);
});
}
render() {
return (
<section className="news">
<div className="container">
{this.newsPost ? (
<ul className="news__post">
<li className="news__post-part fill">
<img
src={require(`../assets/img/${this.newsPost.img}`)}
className="full-width"
alt=""
/>
</li>
<li className="news__post-part">
<h2 className="news__title">{this.newsPost.title}</h2>
<p className="news__desc news__txt">{this.newsPost.desc}</p>
</li>
</ul>
) : (
<p className="loading">Loading...</p>
)}
<ul className="news__list">
{this.state.news ? (
this.state.news.map(post => (
<li className="news__card" key={post.id}>
<NavLink to={`news/${post.id}`} className="news__head fill">
<img
src={require(`../assets/img/${post.imgSm}`)}
className="full-width"
alt=""
/>
</NavLink>
<NavLink
className="news__card-title news__title"
to={`/news/${post.id}`}
>
{post.title}
</NavLink>
<p className="news__txt">{post.date}</p>
</li>
))
) : (
<p className="loading">Loading...</p>
)}
</ul>
</div>
</section>
);
}
}
Если ссылка такая роут не происходит />
Так работает />
Простой
