尝试在我的 React 应用程序中使用链接但遇到问题

Question

我是 React 新手，我正在尝试使用 react-router 显示链接。当我在本地环境中使用我的代码时它可以工作，但是当我在另一个环境中使用时（例如在stackblitz）它不起作用并且我收到此错误：

你不应该在<Router>之外使用<Link>

你能告诉我如何解决它，以便我以后可以自己解决它吗？

这是我的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"
},

完整的应用代码可以在here找到

Answer 1

我分叉了您的应用程序并尝试修复它。您的应用程序必须位于 App.js 中的 BrowserRouter 中，并且您使用的组件必须使用

导出

withRouter

错误不会发生，但您必须在 App.js 中使用 Switch 和 Route 定义路由，才能使指向 /sports/new 的链接正常工作。

在这里简要介绍一下我的项目： https://github.com/dixitk13/simple-react-router/blob/master/src/App.js

您在此处编辑的项目： https://stackblitz.com/edit/react-redux-realworld-oayrtj?file=components%2FApp.js