首先下载react路由版本
npm i react-router-dom@5.2.0
然后去创建页面跟管理路由的文件夹
然后可以去router文件里面去创建
import React, { Component } from 'react' //导入react
import { Route } from 'react-router-dom'
import Home from '../Home/index' //导入路由
import About from '../Adome/index'
export default class index extends Component{
render(){
return(
<div>
<Route path="/" component={Home}></Route>
<Route path="/adome" component={About}></Route>
</div>
)
}
}
随后在index.js里面导入并且包裹App
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(
<BrowserRouter>
<App />
</BrowserRouter>
);
// 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();
最后在app.js中导入router
// import logo from './logo.svg';
import './App.css';
import Index from './router/index'
function App() {
return (
// <div className="App">
// <header className="App-header">
// <img src={logo} className="App-logo" alt="logo" />
// <p>
// Edit <code>src/App.js</code> and save to reload.
// </p>
// <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" >
// Learn React
// </a>
// </header>
// </div>
<div className="App">
<Index></Index>
</div>
);
}
export default App;