我刚刚使用 create-react-app 创建了一个新的react项目。导航时，我在index.js文件中使用了 react-router-dom ，我在App.js中包装了App.js组件，并在index.js中使用了switch组件来加载页面基于URL的更改。其工作正常，问题是当我将URL从/ auth更改为/时，它会加载整个页面，这是不希望的行为
以下是我的import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter forceRefresh={false}>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers:
serviceWorker.unregister();文件
App.js
以下是我的import React from "react";
import logo from "./logo.svg";
import "./App.css";
import { BrowserRouter, Route, Link, Switch } from "react-router-dom";
import HomePage from "./pages/home";
import AuthPage from "./pages/auth";
function App() {
return (
<div className="App">
<Switch>
<Route path="/auth" render={(props) => <AuthPage {...props} />} />
<Route path="/" exact render={(props) => <HomePage {...props} />} />
</Switch>
</div>
);
}
export default App;文件
App.js
理想的行为是，当我从键盘更改浏览器中的url时，不应重新加载整个页面。它应该只在=QUERY(QUERY({A:D;A2:C,E2:E;A2:C,F2:F},"where Col1 is not null order by Col1"), "where Col4 is not null")