反应URL更改，但组件状态相同

Question

I've needed to go to "other" web-page but when i click on the my "Link", that wraps the button, the URL changes but web-page the same

In App.js :

import {Route, Switch} from 'react-router-dom';

class App extends Component {
    render() {
        return (
            <>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route exact path="/rooms" component={Rooms}/>
                    <Route exact path="/rooms/:room" component={Chat}/>
                    <Route exact component={Error}/>
                </Switch>
            </>
        );

    }
}

that component:

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

...
      <Link to="/rooms"  style = {{textDecoration: "none"}}> //That link
        <div class="btn" >  {this.props.Title == "Sing Up" ?"Register Now!" :"Lets Go!"} </div>
      </Link>

I expect the changing of page.enter code here

Answer 1

Try rendering the application inside of a BrowserRouter component.

import { Component } from "react" 
import { BrowserRouter, Switch, Route, Link } from "react-router-dom"

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <Switch> etc </Switch>
            </BrowserRouter>
        )
    }
}

Also the button is using class instead of className .

<div className="btn">