同时显示多个组件的反应路由器

Question

我尝试有多个路由，所以我可以从一个路由重定向到另一个路由，但是每次我添加另一个路由时，主端都会同时呈现样式和组件，我尝试过lazyLoad、Switch并在路由路径中添加“精确”

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

import HomePage from './components/homePage/homePage';
 import SignInForm from './components/signInForm/signInForm';


function App() {
  return (
 <div>
  <Router>
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route exact path="/Sign-In" component={SignInForm} />
  </Switch>
   </Router>
 </div>
  );
}



export default App;

Answer 1

在您的情况下，我认为您应该使用另一种组件顺序：

<Switch>
    <Route path="/Sign-In" component={SignInForm} />
    <Route path="/" component={HomePage} />
</Switch>

Switch检查从上到下的路由，在您的示例中，两者都是“精确的”，因此它会同时显示两者。

如果保持正确的路径顺序，甚至不需要精确。