index.js
一、React-Router介绍
-
react的一个插件库。
-
专门用来实现一个SPA应用。
-
基于react的项目基本都会用到此库。
二、react-router-dom相关API
1. <BrowserRouter>
2. <HashRouter>
3. <Route>
4. <Redirect>
5. <Link>
6. <NavLink>
三、基础路由使用
3.1下载
npm i react-router-dom@5
3.2使用
App.jsx
import React, { Component } from 'react';
import { NavLink, Route } from 'react-router-dom';
import './App.css';
import Header from './components/Header'; //Header是一般组件
import About from './pages/About'; //About是路由组件
import Home from './pages/Home'; //Home是路由组件
export default class App extends Component {
render() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<Header />
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{/* 原生html中,靠<a>跳转不同的页面 */}
{/* <a className="list-group-item" href="./about.html">About</a>
<a className="list-group-item active" href="./home.html">Home</a> */}
{/* 在React中靠路由链接实现切换组件--编写路由链接 */}
<NavLink
activeClassName="on"
className="list-group-item"
to="/about"
>
About
</NavLink>
<NavLink
activeClassName="on"
className="list-group-item"
to="/home"
>
Home
</NavLink>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{/* 注册路由 */}
<Route path="/about" component={About} />
<Route path="/home" component={Home} />
</div>
</div>
</div>
</div>
</div>
);
}
}
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
//引入BrowserRouter依赖
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import './index.css';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
reportWebVitals();
pages/Home/index.jsx
import React, { Component } from 'react'
export default class Home extends Component {
render() {
return (
<h3>我是Home的内容</h3>
)
}
}
pages/About/index.jsx
import React, { Component } from 'react'
export default class About extends Component {
render() {
// console.log('About组件收到的props是',this.props);
return (
<h3>我是About的内容</h3>
)
}
}
components/Header/index.jsx
import React, { Component } from 'react'
export default class Header extends Component {
render() {
// console.log('Header组件收到的props是',this.props);
return (
<div className="page-header"><h2>React Router Demo</h2></div>
)
}
}