reactjs - 如何在登录页面上使用 React Router Link？

问题描述

我仍在学习，并且对使用链接的文档和其他 SO 问题感到相当困惑，以实现从登录页面单击通过我的站点进行路由的目标。我已经将这些概念重新组合了几次，但还没有弄清楚我做错了什么。

index.js

import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom"

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

应用程序.js

import './App.css';
import Header from './Components/Header/Header';
import Landing from './Components/Landing/Landing';
import Map from './Components/Map/Map';
import Footer from './Components/Footer/Footer';
import Contact from './Components/Contact/Contact';
import Questions from './Components/Questions/Questions';
import Error from './Components/Error/Error';
import {
  Router,
  Route,
} from 'react-router-dom';

function App() {
  return (
      <Router>
        <Route path="/Landing" component={Landing} />
        <Route path="/Map" component={Map} />
        <Route path="/Contact" component={Contact} />
        <Route path="/Questions" component={Questions} />
        <Route path="/Error" component={Error} />
        <Route path="/" component={Landing} />
      </Router>
  );
}

export default App;

Landing.jsx 示例

import { Link } from "react-router-dom";

class Landing extends Component {
  render() {
    return(
        <div className="Landing">
          <h4 className="Landing-Find">
            <Link to="/Map">
              Find Your Screening Center
            </Link>
            <FontAwesomeIcon
                      icon={faSearch}
                      size="1x"
                      id="icon"
            />
          </h4>
          <h4 className="Landing-Contact">

包.json

{
  "name": "hack",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.11",
    "@react-google-maps/api": "^1.12.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "bootstrap": "^4.5.2",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1",
    "react": "^16.13.1",
    "react-bootstrap": "^1.3.0",
    "react-dom": "^16.13.1",
    "react-drawers": "^1.4.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "testing-library": "^0.0.2",
    "typescript": "^4.0.3",
    "use-places-autocomplete": "^1.5.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我目前的错误是：

TypeError：无法读取未定义的属性“位置”。

我会继续破解，谢谢！

标签： reactjsreact-router-dom

reactjs - 如何在登录页面上使用 React Router Link？

问题描述

解决方案

推荐阅读