使用后组件不渲染<link>点击

Question

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

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

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