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

Question

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

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 从上往下检查路线，在您的情况下，两者都是“精确的”，因此它会同时显示。

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