javascript - React url 更改但组件状态相同

Question

我需要转到“其他”网页，但是当我单击包装按钮的“链接”时，URL 会更改，但网页相同

在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>
            </>
        );

    }
}

该组件：

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>

我希望改变 page.enter 代码在这里

标签： javascriptreactjs

Answer 1

尝试在组件内渲染应用程序BrowserRouter。

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

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

该按钮也使用class而不是className.

<div className="btn">