маршрутизация в приложении с использованием реагирующего маршрутизатора для перехода на другую страницу

Question

• Я пытаюсь использовать роутер в своем приложении
• , поэтому я использовал response-router-dom, но я сталкиваюсь с проблемами,

• исследовал и нашел эту ссылкуно все еще не помогает мне. Инвариант не удался: Вы не должны использовать за пределами

• Вы можете сказать мне, как использовать маршрут и ссылку

• мне нужно перенаправить на другую страницу.
• предоставив мой фрагмент кода и песочницу ниже.https://codesandbox.io/s/still-smoke-uf731

let Channel = ({ channelName, channelString, onClick, active }) => (
  <div onClick={onClick} className=" col-lg-2 col-md-4 col-sm-6 ">
    <div>router</div>

    <Router>
      <Link to={"/here"}> here</Link>
      <Switch>
        <Route path="/auth" />
        <Route path="/" />
      </Switch>
    </Router>
    <div
      className="channel-button"
      style={{
        backgroundColor: active === channelString ? "orange" : ""
      }}
    >
      <p>{channelName}</p>
    </div>
  </div>
);

Answer 1

Вы можете попробовать это:

import Stats from './containers/stats';
<Route
   exact={true}
   path="/"
   component={Stats}
   key="Mykey"
 />

Answer 2

Я проверил вашу песочницу.Выглядит как хорошее начало, но вы все испортили.

Вот мой форк вашей песочницы: https://codesandbox.io/embed/staging-fast-rr5k9

Во-первых, не кладите реактивные компоненты в контейнеры, поместите ихв папке компонентов и импортируйте их.

То, что происходило, было то, что у вас была новая <Router> для каждой вашей страницы.Поэтому я вытащил роутер.Его также не импортируется правильно.Это должно быть

import { BrowserRouter as Router } from "react-router-dom";

Так что вам в значительной степени нужно что-то вроде этого

      <div>
        <Link to={"/bbc-news"}>BBC</Link>
      </div>
      <div>
        <Link to={"/cnbc"}>CNBC</Link>
      </div>

      <Switch>
        <Route
          key={"fbbc-news"}
          path="/bbc-news"
          render={p => <Channel channelName="BBC" channelString="bbc-news" />}
        />
        <Route
          key={"cnbc"}
          path="/cnbc"
          render={p => <Channel channelName="CNBC" channelString="cnbc" />}
        />
      </Switch>
    </Router>

Где компонент канала отображает то, что находится внутри канала.key в Route важен, потому что он заставляет React правильно запускать componentDidMount, который вызывает thunk-действие, которое выбирает (тот, который идеален).Затем, чтобы получить доступ к результатам из fetch, которые вы поместили в Redux =>

const mapStateToProps = state => ({ json: state.json });

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

Answer 3

Используйте exact в качестве атрибута вашего домашнего маршрута, как показано в следующем коде.

<Router>
  <Link to={"/here"}> here</Link>
  <Switch>
    <Route exact path="/" />
    <Route path="/auth" />
  </Switch>
</Router>