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 >
    )
  }
}