índice.js
1. Introducción a React-Router
-
Una biblioteca de complementos para reaccionar.
-
Específicamente utilizado para implementar una aplicación SPA.
-
Los proyectos basados en React básicamente usarán esta biblioteca.
Dos API relacionadas con react-router-dom
1. <BrowserRouter>
2. <HashRouter>
3. <Route>
4. <Redirect>
5. <Link>
6. <NavLink>
3. Uso de enrutamiento básico
3.1 descargar
npm i reaccionar-router-dom@5
3.2 uso
Aplicación.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>
);
}
}
índice.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();
páginas/Inicio/index.jsx
import React, { Component } from 'react'
export default class Home extends Component {
render() {
return (
<h3>我是Home的内容</h3>
)
}
}
páginas/Acerca de/index.jsx
import React, { Component } from 'react'
export default class About extends Component {
render() {
// console.log('About组件收到的props是',this.props);
return (
<h3>我是About的内容</h3>
)
}
}
componentes/Encabezado/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>
)
}
}