安装依赖
npm i react-router-dom
出口文件代码(index.js)
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter,BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
// <React.StrictMode>
// <BrowserRouter>
// <App />
// </BrowserRouter>
// </React.StrictMode>
<React.StrictMode>
<HashRouter>
<App />
</HashRouter>
</React.StrictMode>
);
reportWebVitals();
上面有两种路由模式,HashRouter和BrowserRouter模式。
App.js中的代码
import React from 'react';
import { Routes, Route, Link,NavLink } from 'react-router-dom';
import Home from './Home/Home'
import About from './About/About'
import News from './News/News'
export default function BoxReact() {
return (
<>
<Routes>
<Route path='/' element={<Home></Home>}></Route>
<Route path='/about' element={<About></About>}></Route>
<Route path='/news' element={<News></News>}></Route>
</Routes>
</>
)
}
输入不同的路径就可以展示不同的页面代码。这样是极其的不方便,需要一个路由导航.
link和NavLink
react-router-dom中提供了Link和NavLink两种导航.最主要的区别就是NavLink提供了一个active的激活类。方便加上激活色等操作。
代码
import React from 'react';
import { Routes, Route, Link,NavLink } from 'react-router-dom';
import Home from './Home/Home'
import About from './About/About'
import News from './News/News'
export default function BoxReact() {
return (
<>
{/* <Link to="/">首页</Link>
<Link to="/about">关于页</Link>
<Link to="/news">新闻页面</Link> */}
<NavLink to="/">首页</NavLink>
<NavLink to="/about">关于页</NavLink>
<NavLink to="/news">新闻页面</NavLink>
<Routes>
<Route path='/' element={<Home></Home>}></Route>
<Route path='/about' element={<About></About>}></Route>
<Route path='/news' element={<News></News>}></Route>
</Routes>
</>
)
}
两种方式两种选择,很是方便.