javascript - 如何在 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在屏幕上显示我的组件两次。

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

标签： javascriptreactjsreact-reduxreact-router

Answer 1

您的路线配置应该是：

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

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

但是在您更改为我的建议后，如果您导航到/login. 因为div.app将为每条路线渲染：D