在反應中從登錄重定向到注冊表單

Question

我是 react 的初學者，我已經使用 material ui 將登錄和注冊表單實現為 ​​2 個組件。 如果我沒有登錄帳戶，我想要做的是從登錄重定向到注冊頁面，如果我已經有帳戶，則從注冊重定向到登錄。 我想使用 react router 來做到這一點，但在官方文檔中，我需要有一個帶有我的路由的導航欄，但我想先顯示我的登錄組件，如果我點擊鏈接，然后重定向到 register ，反之亦然。

在 login.js 中注冊的鏈接

import Link from '@material-ui/core/Link';

<Link to="/register" variant = "body2">
  Not have an account ? Sign up here 
</Link>

在 register.js 中登錄的鏈接

import Link from '@material-ui/core/Link';

<Link to="/" variant = "body2">
  Not have an account ? Sign up here 
</Link>

App.js 必須返回登錄表單，我點擊鏈接切換

function App(){

  return <Login/>

}

我在下面試過這個，但我得到了Error: Invariant failed: You should not use <Switch> outside a <Router>

import Register from './Components/register';
import Login from './Components/login';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
   <Switch>
     <Route exact path = "/"><Login/></Route>
     <Route path = "/register"><Register/></Route>
   </Switch>
  );
}

export default App;

Answer 1

您的 app.js 中缺少路由器包裝器，您應該執行以下操作：

import Register from './Components/register';
import Login from './Components/login';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
<Router>
   <Switch>
     <Route exact path = "/"><Login/></Route>
     <Route path = "/register"><Register/></Route>
   </Switch>
</Router>
  );
}

export default App;

Answer 2

首先從Login.js不使用鏈接自'react-router-dom'

import Link from '@material-ui/core/Link';

您正在使用材料 ui 中的鏈接，材料 ui 使用href從頁面 A路由到頁面 B，而不是react-router-dom使用的to關鍵字

由於您使用的是 Material Ui 中的表單，您仍然可以更改鏈接並使用 react-router-dom 鏈接

你的代碼應該是這樣的：

登錄.js

import {Link} from 'react-router-dom';
//Now with link coming from react-router you can use **to**
<Link to="/register" variant = "body2">
  Not have an account ? Sign up here 
</Link>

• 因此，當您想路由到某些事件的頁面時，將應用相同的邏輯，您想以我上面顯示的方式導入鏈接

現在在應用程序級別，您必須使用路由器包裝它

import Register from './Components/register';
import Login from './Components/login';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
   <Router>
       <Switch>
         <Route exact path = "/"><Login/></Route>
         <Route path = "/register"><Register/></Route>
       </Switch>
   </Router>
  );
}

export default App;