create-react-app新版本快速搭建一个简易的路由页面

因为create-react-app 没有给我默认搭建路由所以只能让我们自己去搭建了 不过 简单的路由还是很快可以搭建好的

npm i react-router-dom --save
or 
yarn add react-router-dom --save

这里是 react-router-dom v6版本的哈
然后就是使用了
index.js

import {
    
     BrowserRouter } from 'react-router-dom'
ReactDOM.render(
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>,
  document.getElementById('root')
);

App.js

import "./App.css";
import {
    
     Routes, Link, Route } from "react-router-dom";

function Home() {
    
    
  return (
    <>
      <main>
        <h2>Welcome to the homepage!</h2>
        <p>You can do this, I beleive in you.</p>
      </main>
      <nav>
        <Link to="/about">About</Link>
      </nav>
    </>
  );
}
function About() {
    
    
  return (
    <>
      <main>
        <h2>Who are we</h2>
        <p>That feels like an existential question, don't you think?</p>
      </main>
      <nav>
        <Link to="/">Home</Link>
      </nav>
    </>
  );
}
function App() {
    
    
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={
    
    <Home />}></Route>
        <Route path="/about" element={
    
    <About />}></Route>
      </Routes>
    </div>
  );
}

export default App;

制作完成。至于公司用到的 基本上都会在路由上面封装一下。

关注我 持续更新前端知识。