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

【问题标题】：How to use Memory Route In React Js ? What is exact method to use route?如何在 React Js 中使用内存路由？使用路线的确切方法是什么？
【发布时间】：2024-05-19 06:10:01
【问题描述】：

我在我的 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 组件两次。

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

【问题讨论】：

第一个来自<Route exact="/" component={Login}></Route>，第二个来自三元内的<Login></Login>。不确定您在这里实际想要实现的目标（正如@GabrielLupu 所说，您的路线肯定是错误的）

标签： javascript reactjs react-redux react-router

【解决方案1】：

您的路线配置应该是：

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

exact 应该是一个布尔值。它会告诉路由器只渲染与 URL 完全匹配的路由。也就是说，当用户停留在/时，路由器只会渲染Welcome组件。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

虽然组件当然应该有不同的路由，但在这种情况下，React Router 不会同时显示 - 它只会显示第一个。