单击使用 <Link> 后组件未呈现

Question

我是 React JS 的新手，如果这个问题看起来微不足道，我很抱歉。

我在 App.js 中设置了一个 <Switch> 和一些 Routes 来重定向和 link 组件。 App.js 中的第一个 <Redirect> 转到 ComponentA，当单击 div 时，它应该转到 ComponentB，但事实并非如此。经过一番摆弄后，我可以让 ComponentB 进行渲染，但它与 ComponentA 是一致的，现在有了更多更改，除了 header .../componentB.[=22 什么都没有显示=]

App.js

import { ComponentA, ComponentB } from './components/Component.js';
import { BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  return (
    <div>
      <Router exact path="/">
        <Switch>
          <Route exact path="/componentA" component={ComponentA}/>
          <Route exact path="/componentB" component={ComponentB}/>      
          <Route exact path="/componentC" component={ComponentC}/>  
        </Switch>  
        {isLoggedIn ? <Redirect to="/componentA"/> : <Redirect to="/componentC"/>}
        // componentC is irrelevant to the question
      </Router>
    </div>
  );
}

组件A

import { BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';

function ComponentA() {  
  return (
    <div>
      <Router exact path="/">
        // ... code
        <Link exact to="/componentB">
           <div></div>
        </Link>
      </Router>
    </div>
  );
}

ComponentB（与 ComponentA 在同一个文件中）

function ComponentB() {
  return (
    <div>Welcome to ComponentB</div>
  );
}

Answer 1

问题

我认为 ComponentA 中呈现的第二个 Router 组件正在劫持 link 导航。这个“内部”路由上下文处理导航请求并更新地址栏中的 URL 但不允许“外部”路由上下文看到更改并更新匹配和呈现的 Route .

解决方案

删除 ComponentA 中的 Router，同时删除 Link 中的 exact 属性，因为它不是 link 属性。

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

function App() {  
  return (
    <div>
      // ... code
      <Link to="/componentB">
        <div></div>
      </Link>
    </div>
  );
}

从 Router 中删除 exact 和 path 属性，这些是 Route 组件的属性。

import { ComponentA, ComponentB } from './components/Component.js';
import { BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  return (
    <div>
      <Router>
        <Switch>
          <Route exact path="/componentA" component={ComponentA}/>
          <Route exact path="/componentB" component={ComponentB}/>      
          <Route exact path="/componentC" component={ComponentC}/>  
        </Switch>  
        {isLoggedIn ? <Redirect to="/componentA"/> : <Redirect to="/componentC"/>}
        // componentC is irrelevant to the question
      </Router>
    </div>
  );
}

更新

您的应用程序只需要一个路由上下文，通常是包装 App 组件的 Router。梳理任何其他嵌套 Router 组件的代码并删除它们，因为这些会扰乱导航，如上所述。

单击使用 <Link> 后组件未呈现

Component not rendering after using <Link> on click

javascript

components

reactjs

react-router

react-router-dom

问题

解决方案

更新