и я работал над проектом входа в систему, и я использовал 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 >
        )
    }
}
 

Я нажимаю на тег, но он изменяет только путь, но интерфейс этого не делает

Проблема

Похоже, вы вложили дополнительный Router в свой ContainerLogin компонент. Link Обновляется контекст маршрутизации ближайшего Router . Router Обертывание приложения и обработка других маршрутов не «уведомляются» об изменении.

Решение

Удалите лишнее Router в ContainerLogin компоненте. Он 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 >
    )
  }
}