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

Question

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

我在 App.js 中设置了一个 <Switch> 和多个 Routes 来将组件重定向和链接在一起。 App.js 中的第一个<Redirect> 转到ComponentA，当单击div 时，它应该转到ComponentB，但事实并非如此。经过一番摆弄，我可以让ComponentB 进行渲染，但它与ComponentA 是一致的，现在有了更多的变化，除了标题.../componentB 之外什么都没有显示。

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 组件正在劫持链接导航。此“内部”路由上下文处理导航请求并更新地址栏中的 URL，但不允许“外部”路由上下文查看更改并更新匹配和呈现的 Route。

解决方案

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

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 组件梳理您的代码并将它们删除，因为这些会像上面解释的那样混淆导航。