如何在 React Js 中使用内存路由？使用路由的确切方法是什么？

Question

我在我的 App.js 中使用了如下所示的 react js 内存路由器 -

import logo from './logo.svg';
import './App.css';
import  './Components/Login'
import Login from './Components/Login';
import {useSelector} from 'react-redux';
import { useEffect } from 'react';
import Welcome from './Components/Welcome';
import{MemoryRouter as Router, Route, Switch} from 'react-router-dom'
function App() {
  const state = useSelector(state => state.allReducers)
  console.log(state.user.isValid);
  
  return (    
      <Router>
        <Switch>
          <Route exact="/" component={Login}></Route>
          <Route exact="/" component={Welcome}></Route>
        </Switch>
    <div className="App">
     {state.user.isValid==false ||state.user.isValid== undefined  ? <Login></Login> : <Welcome name={state.user.userName}></Welcome>} 
    </div>
    </Router>
  );
}
export default App;

但这会在屏幕上显示我的 Login 组件两次。

我怎样才能避免这种情况？

Answer 1

你的路由配置应该是：

<Switch>
  <Route path="/login" component={Login} />
  <Route path="/" component={Welcome} exact={true} />
</Switch>

exact 应该是一个布尔值。它会告诉路由器只渲染与 URL 完全匹配的路由。这意味着，路由器仅在用户停留在 Welcome 时呈现 / 组件。

但是在您更改我的建议之后，如果您导航到 /login，您仍然会看到 2 个登录表单。因为 div.app 将为每条路线呈现 :D

Answer 2

您对两个组件使用相同的路由：<Route exact="/"...，因此 React 将向您展示两者。为每个组件使用不同的路由。而且你的语法有点错误。像这样：

<Switch>
  <Route exact path="/"><Welcome /></Route>
  <Route exact path="/login"><Login /></Route>
</Switch>