React-router实现简单的路由跳转

主要是通过NavLink，Route两个标签进行路由跟组件的匹配，实现了简单的路由跳转和内容显示，使用BrowserRouter还是HashRouter看自己的选择，HashRouter会在地址上多个“#”号

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './index/index';
import reportWebVitals from './reportWebVitals';
// import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
reportWebVitals();

index.jsx

import './index.css';
import React from 'react';
import { BrowserRouter as Router, Route, NavLink ,Routes} from 'react-router-dom'
import One from './One'
import Two from './Two'
function App() {
  return (
    <div className="App">
      <header className="App-header">
      </header>
      <Router>
        <div>
          <NavLink to="/one" style={{marginRight: '20px'}}>菜单一</NavLink>
          <NavLink to="/two">菜单二</NavLink>
        </div>
        <div style={{width: '200px',height: '200px', marginLeft: '20px'}}>
          <span>显示内容</span>
          <Routes>
            <Route path="/one" element={<One/>} />
            <Route path="/two" element={<Two/>} />
          </Routes>
        </div>
        {/* <Outlet></Outlet> */}
      </Router>
    </div>
  );
}

export default App;

One.jsx

import React from 'react';

export default class Cp extends React.Component {
  render(){
    return (
      <div>菜单一</div>
    )
  }
}

Two.jsx

import React from 'react';

export default class Cp extends React.Component {
  render(){
    return (
      <div>菜单二</div>
    )
  }
}