Проблема рендеринга компонента на другой странице с помощью React Router

Question

Я создаю персональный веб-сайт для обучения с React, и я застрял на пару дней, чтобы создать компонент с React Router, как будто я создаю сообщение в блоге, когда нажимаю на карту.

Каждый раз, когда я нажимаю на карточку, вместо этого у меня есть правильные данные, но они находятся внизу главной страницы, и я хотел бы открыть их динамически на новой странице, например, если я нажму на статью в блоге или новость.

Компонент «Моя карта»

  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} />
      </>
    );
  }
}

Когда я нажимаю на кнопку {job.workplace_name}, я хотел бы отобразить компонент ниже на новой странице, а не под компонентом моей карты

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

Когда вы кодируете свое приложение с реагирующим маршрутизатором, у вас должен быть компонент верхнего уровня, который отвечает за решение, какой экран печатать на основе URL, который вы посещаете.

Это должно выглядеть так

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
);

Компонент Switch будет отображать только первый маршрут, соответствующий текущему URL. Если вы не используете его, каждый маршрут, который соответствует, будет обработан. Это полезно на верхнем уровне, чтобы избежать двух экранов одновременно (вроде как ваша проблема).

---

Ваша самая большая проблема в том, что вы указали маршрут, который отвечает за отображение страницы блога внутри компонента вашей карты.

Иерархия компонентов:

Router
└ App
   └ Route+Home (maybe)
      └ Card
         └ Route+Articles

Что должно быть вместо:

Router
└ App
  └ Switch
    ├ Route+Home (maybe)
    │ └ Card
    └ Route+Articles

---

Также, когда вы впервые измените местоположение (url), вы можете использовать компонент Link, как вы это сделали, или использовать реквизиты истории, полученные из компонента Route.

В приведенном выше примере Dashboard и Invoice получают свойство «history».

• history.push(path) будет имитировать навигацию
• history.replace(path) будет имитировать перенаправление.

и есть еще https://reacttraining.com/react-router/core/api/history

Answer 2

Итак, предположительно, у вас есть файл index.js, который выглядит или должен выглядеть так, где вы добавили <BrowserRouter> в соответствии с решением:

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
);

Но что если ваш файл index.js будет выглядеть так:

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")

потому что вы создали файл index.js, который находится на верхнем уровне иерархии компонентов, а затем файл App.js, который выглядит следующим образом:

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;

В таком случае вы можете использовать ключевое слово exact на всех ваших Route с и инкапсулировать все это в <BrowserRouter> и убедиться, что оно инкапсулировано в <div> с таким образом:

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;