Problem rendering Component in a different page with React Router - reactjs

Question

I'm creating a personal website to train with React and i have been stuck since a couples of days to render a component with React Router like i will render a blog post when i click on the card.
Eveytime i click on the card instead i got the correct data but it's om the bottom of the main page and i would like to open it dynamically on a new page, like if i click on an article of a blog or a news.
My card component
render() {
const { match } = this.props;
const { data, value } = this.state;
return (
<>
<div>
{data.map((job, id) => (
<div key={id}>
<div key={job._id} className="blog-card">
<div className="meta">
<div className="photo">
<img src={job.img} alt="logo" />{" "}
</div>
</div>
<div className="description">
<p> {job.description}</p>
<p className="read-more">
<p>{job.location}</p>
<p>
<span className="apply-job">
{" "}
<Link
className="link-apply"
to={{
pathname: `${match.url}/${job._id}`,
state: job
}}
>
go to {job.workplace_name}
</Link>{" "}
</span>
</p>
</p>
</div>
</div>
</div>
))}
</div>
}
<Route path={`${match.path}/:_id`} component={Articles} />
</>
);
}
}
When i click on go to {job.workplace_name} i would like to render the component below on a new page and not under my card component
const Articles = ({ location }) => (
<div>
<h1>Hello</h1>
<h1>{location.state.workplace_name}</h1>
<h2>{location.state.position_name}</h2>
<h2>{location.state.description}</h2>
<h2>{location.state.Compensation}</h2>
</div>
)
export default Articles;

Answer 1

When you code your app with react-router you should have a top-level component that is in charge of deciding which screen to print based on the url you are visiting.
It should look like this
import { BrowserRouter } from "react-router-dom";
import { Route, Switch } from "react-router";
const App = () => (
<Switch>
<Route exact path="/invoices/dashboard" component={Dashboard} />
<Route path="/invoices/:id" component={Invoice} />
</Switch>
);
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
el
);
The Switch component will render only the first Route that matches the current URL.
If you don't use it, every route that match will be rendered.
The is useful at the top level to avoid having two screens at the same time (kinda like your issue).
Your biggest issue is that you put the route responsible for the display of a blog page inside your card component.
Your component hierarchy:
Router
└ App
└ Route+Home (maybe)
└ Card
└ Route+Articles
What it should be instead:
Router
└ App
└ Switch
├ Route+Home (maybe)
│ └ Card
└ Route+Articles
Also when you new to change the location (url) you can use the Link component as you did, or use history props that you get from the Route component.
In the example above, Dashboard and Invoice get the "history" property.
history.push(path) will simulate navigation
history.replace(path) will simulate redirection.
and there's more https://reacttraining.com/react-router/core/api/history

Answer 2

So presumably, you have an index.js file that looks like this or should look like this where you added <BrowserRouter> in accordance to the solution:
import { BrowserRouter } from "react-router-dom";
import { Route, Switch } from "react-router";
const App = () => (
<Switch>
<Route exact path="/invoices/dashboard" component={Dashboard} />
<Route path="/invoices/:id" component={Invoice} />
</Switch>
);
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
el
);
But, what if your index.js file looked like this instead:
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose } from "redux";
import reduxThunk from "redux-thunk";
import App from "./components/App";
import reducers from "./reducers";
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducers,
composeEnhancers(applyMiddleware(reduxThunk))
);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.querySelector("#root")
because you created an index.js file that is at the top-level of your component hierarchy and then an App.js file, that looks like this:
import React from "react";
import { Route } from "react-router-dom";
import Dashboard from "./invoices/Dashboard";
import Invoice from "./invoices/Invoice";
import Header from "./Header";
const App = () => {
return (
<div className="ui container">
<div>
<Header />
<Route exact path="/invoices/dashboard" component={Dashboard} />
<Route path="/invoices/:id" component={Invoice} />
</div>
</div>
);
};
export default App;
In such a case, you can use the exact keyword on all your Routes and encapsulate it all inside of <BrowserRouter> and ensure you have that encapsulated in <div>s like so:
import React from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Dashboard from "./invoices/Dashboard";
import Invoice from "./invoices/Invoice";
import Header from "./Header";
const App = () => {
return (
<div className="ui container">
<BrowserRouter>
<div>
<Header />
<Route exact path="/invoices/dashboard" component={Dashboard} />
<Route exact path="/invoices/:id" component={Invoice} />
</div>
</BrowserRouter>
</div>
);
};
export default App;