在App.js路由最外层包一个BrowserRouter
import './App.css';
import React from "react";
import {BrowserRouter,Routes,Route,Link} from "react-router-dom";
import View1 from "./component/view1";
import View2 from "./component/view2";
function App() {
return (
<BrowserRouter>
<div className='App'>
<Link to='/view1'>view1</Link>
<br/>
<Link to='/view2'>view2</Link>
<Routes>
<Route path='/view1' component={View1}/>
<Route path='/view2' component={View2}/>
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
或者在index.js中App外包一个BrowserRouter
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();