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

Question

Я новичок в React и пытаюсь отобразить ссылку с помощьюact-router.Когда я использую свой код в моей локальной среде, он работает, но когда я использую в другой среде (например, stackblitz), он не работает, и я получаю эту ошибку:

Выне следует использовать <Link> за пределами <Router>

Подскажите, пожалуйста, как это исправить, чтобы в будущем я сам мог это исправить?

Это мой коддля Link:

<Typography variant="title" id="tableTitle">
  sports
  <Link to={`/sports/add`}>
    <IconButton variant="fab" color="secondary" aria-label="Edit" className={classes.button}>
    {/* <FontAwesomeIcon style={{ margin: '10' }} size='md' icon={faPlusCircle} /> */}  
    </IconButton>
  </Link>
</Typography>

Main.js (Маршруты):

export default class Main extends Component {
  render() {
    return (
      <div>
        <Switch>
          <Route path="/sportss/index" component={sports} />
          <Route path="/sportss/add" component={sportsAdd} />
          <Route path="/sportss/edit/:id" component={sportsAdd} />
          <Route path="/" component={Home} />
        </Switch>
      </div>
    )
  }
}

Package.json зависимости:

"dependencies": {
  "@material-ui/core": "3.3.1",
  "@material-ui/icons": "^3.0.1",
  "axios": "^0.18.0",
  "classnames": "^2.2.6",
  "gos-theme": "^2.0.0",
  "lodash": "^4.17.11",
  "marked": "0.3.6",
  "material-ui": "0.20.2",
  "prop-types": "15.5.10",
  "react": "16.6.0",
  "react-dom": "16.6.0",
  "react-js-pagination": "^3.0.2",
  "react-redux": "5.0.5",
  "react-router": "3.0.5",
  "react-router-dom": "^4.3.1",
  "react-scripts": "^2.0.5",
  "react-ultimate-pagination": "^1.2.0",
  "redux": "3.7.2",
  "redux-devtools-extension": "2.13.2",
  "redux-form": "^7.4.2",
  "redux-form-material-ui": "^4.3.4",
  "redux-logger": "3.0.6",
  "redux-promise": "^0.6.0",
  "redux-thunk": "^2.3.0",
  "styled-components": "^4.0.2",
  "superagent": "3.5.2",
  "superagent-promise": "1.1.0"
},

Полный код приложения может бытьнайдено здесь

Answer 1

Я разбудил ваше приложение и попытался исправить его.Ваше приложение должно быть внутри BrowserRouter в App.js, а используемый вами компонент должен быть экспортирован с

withRouter

Ошибки не происходят, но вы должны были определить маршруты с Switch и Route в App.jsсделать ссылку, указывающую на / sports / new work.

Кратко рассмотрите мой проект здесь: https://github.com/dixitk13/simple-react-router/blob/master/src/App.js

Ваш отредактированный проект здесь: https://stackblitz.com/edit/react-redux-realworld-oayrtj?file=components%2FApp.js