链接不重定向到 React 中的页面答案

【问题标题】：Link not re-directing to a page in React链接不重定向到 React 中的页面
【发布时间】：2020-09-11 17:06:38
【问题描述】：

我正在尝试制作导航栏，但没有重定向到给定页面。如果我单击导航栏中的任何链接，它会更改 url 栏中的路径，但不会重定向到该页面。我不确定我是否遗漏了什么。当我用标签替换它时，它工作得很好。

Navbar.js

import React from "react";
import { BrowserRouter as Router, Link, Switch } from "react-router-dom";

const Navbar = () => {
  return (
    <Router>
      <Switch>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/articles">Articles</Link>
            </li>
            <li>
              <Link to="/articles-all">All articles</Link>
            </li>
          </ul>
        </nav>
      </Switch>
    </Router>
  );
};
export default Navbar;

App.js

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import './App.css'

//pages
import Home from "./Pages/Home";
import About from "./Pages/About";
import Articles from "./Pages/Articles";
import ArticlesList from "./Pages/ArticlesList";

//components
import Navbar from './components/Navbar';

const App = () => {
  return (
    <div>
      <Navbar/>
      <Navigation />
    </div>
  );
};
export default App;

const Navigation = () => {
  return (
    <Router>
      <div id="page-body">
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/articles" component={Articles} />
          <Route path="/articles-all" component={ArticlesList} />
      </div>
    </Router>
  );
};

【问题讨论】：

从Navbar 组件中删除Router,Switch 并将其添加到Navigation
这就是我之前这样做的原因，但在 Navbar.js 中收到错误 Error: Invariant failed: You should not use <Link> outside a <Router>
让我帮你改正

标签： reactjs ecmascript-6 react-router react-router-dom

【解决方案1】：

由于您在 Navigation 中定义了路由器，而在 Navbar 中定义了另一个路由器，因此您的链接无法与 Navigation 中的路由器组件通信，因为它们只是与最近的父路由器组件通信

您必须使用单个路由器实例才能在您的应用程序中执行无缝导航。此外，Links 不需要 Switch 组件，但 Route 需要一个 Switch 组件

const App = () => {
  return (
    <Router>
      <Router component={Navbar}/>     // rendered as default route so that they receive router props
      <Router component={Navigation} />
    </Router>
  );
};
export default App;

const Navigation = () => {
  return (
      <div id="page-body">
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/articles" component={Articles} />
          <Route path="/articles-all" component={ArticlesList} />
      </div>
  );
};


const Navbar = () => {
  return (
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/articles">Articles</Link>
            </li>
            <li>
              <Link to="/articles-all">All articles</Link>
            </li>
          </ul>
        </nav>

  );
};
export default Navbar;

【讨论】：

【解决方案2】：

这是一个有效的代码框 URL https://codesandbox.io/s/frosty-black-3i8hp?file=/src/App.js

您使用 browserRouter 和 Switch 包装链接。这些 API 仅用于包装路由。

因此，它无法与您的 React 应用进行良好通信。

【讨论】：