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

Issue

看起来你在你的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 >
)
}
}