Question

这是我的代码，当我尝试进入/或/ home时，将呈现组件，但是当我想要进入/ login或/ contacts时，则不呈现组件，我不知道问题出在哪里，有人能帮我吗？

 import React, { Component } from "react"
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import ContentInfo from './components/Card/Card';
import LoginCard from './components/LoginCard/LoginCard';
import ContactsCard from './components/ContactsCard/ContactsCard';
import RegisterCard from './components/RegisterCard/RegisterCard';
import {Root} from './components/Root';
import {HomeRoot} from './components/HomeRoot';
import Panel from './components/Panel/Panel';
import './components/particles.css';

class App extends Component {

  render(){
    return (
      <Router>
            <Switch>
              <Route path={"/"} exact>
                <Root>
                  <Route component={ContentInfo} />
                  <Route path={"/login"} exact component={LoginCard} />
                  <Route path={"/contacts"} component={ContactsCard} />
                  <Route path={"/register"} component={RegisterCard} />
                </Root>
              </Route>
              <Route path={"/home"}>
                <Switch>
                  <HomeRoot>
                    <Route component={Panel} />
                  </HomeRoot>
                </Switch>
              </Route>
            </Switch>
      </Router>
    );
  }
}

export default App;

Answer 1

从我们的评论对话中，如果我理解正确，那么您正在寻求执行以下操作：

import { useLocation } from 'react-router-dom'

.
.
.

const location = useLocation()

return (
<Router>
        <Switch>
           {location.pathname === '/home' ? <HomeRoot /> : <Root />}
           <Route exact path={"/"} component={ContentInfo} />
           <Route path={"/login"}  component={LoginCard} />
           <Route path={"/contacts"} component={ContactsCard} />
           <Route path={"/register"} component={RegisterCard} />
           <Route path={"/home"} component={Panel}>
          </Route>
        </Switch>
  </Router>
)

反应路由器dom无法正确重定向

1 个答案: