因为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;
制作完成。至于公司用到的 基本上都会在路由上面封装一下。
关注我 持续更新前端知识。