I'm having a weird issue where I'm building a blog website and I have a blog section called /blog in Blog.js.
And when users click on "Read More" it heads to a specific blog post called /blogpost in BlogPost.js. There is a back button in BlogPost and a navigation bar at the top of the page. When clicking on the back button or the "Blog" part or the navigation bar it should do the same thing as moving back to the Blog section.
However only the back button is working but the navigation bar at the top isn't. Clicking on the other sections of the navigation bar such as "Resume" or "Project" work though and if I click on those and then click on "Blog" it works perfect. The issue seems to be when I'm on the BlogPost section and try to navigate back to the Blog section using the navigation bar is when issues arise. My navigation bar is coded in my App.js.
App.js:
function App() {
return (
<BrowserRouter>
<div className="App">
<header className="App-header">
<div class="tab">
<NavLink to="/personal_website">
<button class="tablinks" type="button">
Home
</button>
</NavLink>
<NavLink to="/resume">
<button class="tablinks" type="button">
Resume
</button>
</NavLink>
<NavLink to="/projects">
<button class="tablinks" type="button">
Projects
</button>
</NavLink>
<NavLink to="/blog">
<button class="tablinks" type="button">
Blog
</button>
</NavLink>
</div>
<Route exact path = "/personal_website" render = {props => (
<React.Fragment>
<h1> Hello </h1>
</React.Fragment>
)}/>
<div>
<Switch>
<Route exact path = "/resume" component = {Resume} />
<Route exact path = "/projects" component = {Projects} />
<Route exact path = "/blog" component = {Blog} />
</Switch>
</div>
</header>
</div>
</BrowserRouter>
);
}
export default App;
Blog.js:
import BlogTest1 from './BlogTest1.js';
import BlogTest2 from './BlogTest2.js';
function Blog() {
return (
<BrowserRouter>
<div>
<Switch>
<Route exact path="/blogtest1" component={BlogTest1} />
<Route exact path="/blogtest2" component={BlogTest2} />
<Route exact path="/blog" component={BlogSection} />
</Switch>
</div>
</BrowserRouter>
);
}
function BlogSection() {
return (
<header>
<h1> Blog </h1>
<div class="cardblog">
<div class="containerblog">
<NavLink to="/blogtest1">
<button type="button" class="readbtn">Read More </button>
</NavLink>
</div>
</div>
<div class="cardblog">
<div class="containerblog">
<NavLink to="/blogtest2">
<button type="button" class="readbtn">Read More</button>
</NavLink>
</div>
</div>
</header>
);
}
export default Blog
BlogTest1.js:
import BlogSection from './Blog.js';
function URABlog() {
return (
<BrowserRouter>
<div>
<Switch>
<Route exact path="/blog" component={BlogSection} />
<Route exact path="/blogtest1" component={BlogTest1Home} />
</Switch>
</div>
</BrowserRouter>
);
}
function BlogTest1Home() {
return (
<div>
<header>
<NavLink to="/blog">
<img class="backbtn" src={BackButton} alt = "BackButton"/>
</NavLink>
</header>
</div>
)
}
export default BlogTest1Home
Screenshots:
When I am on the blog section I am on http://localhost:3000/blog
When I click on "Read more" it leads to this and then I am on http://localhost:3000/blogtest1. The backbutton works to go back to the Blog Section however the Blog button at the top doesn't work and is controlled by App.js. It's important to note as well that when I do click the Blog button at the top it changes to http://localhost:3000/blog however the actual content of the page doesn't change at all.
I would really appreciate any help as I'm just so confused on why this is happening.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…