react-router 快速指南
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
动态路由是 react-router 使用的路由类型。与静态路由不同，动态路由发生在应用程序渲染时。这是因为 react-router 使用组件来定义路由。
负责显示不同路径的组件始终处于渲染状态。有时它们会渲染组件，有时则不渲染，具体取决于页面位置。
为了定义应用程序的不同路由，我们可以使用 Route 组件。该组件的功能是根据路径中标识的当前位置来选择要渲染的内容。正如我们之前看到的，所有 Route 组件都会渲染，但有时它们会渲染组件，有时则会返回 null。
import React from 'react';
import logo from './logo.svg';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Principal from './pages/principal/principal';
import Login from './pages/login/login';
import './App.css';
function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/principal" component={Principal} />
<Route path="/" component={Login} />
</Switch>
</BrowserRouter>
);
}
export default App;
您可以在应用程序中使用 Link 组件进行导航，这会将您重定向到与当前路由不同的路由。重定向到的路径会替换浏览器历史记录中的当前位置，以下是一个简单的示例。
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './Layout.css';
class Layout extends Component {
render() {
return (
<div className="Layout">
<div className="link-container">
<Link to="/page1" className="link">go page 1</Link>
</div>
<div className="link-container">
<Link to="/page2" className="link">go page 2</Link>
</div>
</div>
);
}
}
export default NavBar;
希望这对您有所帮助，非常感谢您的阅读。
文章来源：https://dev.to/sabrinasuarezarrieta/react-router-a-quick-guide-12oh