React-Router 不會將我從組件重定向

Question

我一直在做一個登錄項目，我使用 react-router 給我的頁面提供路由，我用一個組件制作了一個按鈕，將我重定向到注冊表，但它只改變了路由，但界面沒有改變，它保持不變，更改它的唯一方法是更新頁面或使用標簽，但這會使頁面更新。 有誰知道如何解決這個問題？

代碼：

    import logo from './logo.svg';
import React, { Component } from 'react'
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";

import ContainerRegister from './components/containerRegister'
import ContainerLogin from './components/containerLogin'




class App extends Component {
  componentDidMount() {
    fetch('http://192.168.1.7:3001/api/test')
      .then(r => r.json())
      .then(console.log)
  }

  render() {
    return (
        <Router>
      <div>
          <Switch>

          <Route exact path="/login">
          <ContainerLogin />
          </Route>

          <Route exact path="/register">
          <ContainerRegister />
          </Route>

          </Switch>
        
      </div>
      </Router>
    )
  }
}


export default App;

登錄組件代碼

import React, { Component } from 'react'

import {BrowserRouter as Router, Link} from "react-router-dom";

export default class containerLogin extends Component {
    render() {
        return (
            <div className="container container-login p-0 mt-5">
                <div className="barra-top p-1 d-blck"></div>
                <div className="text-center">
                    <h4 className="p-4">Account Login</h4>

                    <form action="" className="p-3">

                        <div class="input-field input-form col s6 pb-5 m-auto">
                            <input id="email-login" type="email" class="validate" classname="w-100" />
                            <label for="email-login">Email</label>
                        </div>

                        <div class="input-field input-form col s6  m-auto pb-5">
                            <input id="password" type="password" class="validate" classname="w-100" />
                            <label for="password">Password</label>
                        </div>

                        <button class="btn waves-effect waves-light" type="submit" name="action">Submit
                            <i class="material-icons right">send</i>
                        </button>


                    </form>
                    <p className="pb-4">
                    <Router>
                        <Link to="/register">Register</Link>
                        </Router>
                    </p>
                </div>
            </div >
        )
    }
}

我按標簽但它只改變路徑但界面沒有

Answer 1

問題

看來您已經在ContainerLogin組件中嵌套了一個額外的Router 。 Link正在更新最近的Router的路由上下文。 包裝應用程序並處理其他路由的Router不會“通知”更改。

解決方案

移除ContainerLogin組件中多余的Router 。 Link仍然可以工作，因為它仍然被App中的路由器上下文包裝。

export default class containerLogin extends Component {
  render() {
    return (
      <div className="container container-login p-0 mt-5">
        <div className="barra-top p-1 d-blck"></div>
        <div className="text-center">
          ...

          <p className="pb-4">
            <Link to="/register">Register</Link> // <-- no router, just link
          </p>
        </div>
      </div >
    )
  }
}