React-Router路由配置
<h3 id="react-router">React-Router</h3><p>参考学习地址: https://reactrouter.com/web/guides/quick-start</p>
<p>// 5 的版本主要是针对 react Hook 做更好的支持</p>
<ol>
<li>
<p>安装<br>
npm install react-router-dom --save</p>
</li>
<li>
<p>路由的作用<br>
单页面应用（SPA），路由跳转，切换显示视图</p>
</li>
</ol>
<h3 id="hashrouter与browserrouter区别">HashRouter与BrowserRouter区别</h3>
<p>BrowserRouter：<br>
原理是H5的history API，IE9及以下不兼容，需要由web server支持，在web client这边window.location.pathname被react router解析，http://localhost:3000/home</p>
<p>HashRouter：<br>
原理是URL的hash，不需要由web server支持，因为它的只有‘/’path需要由web server支持，而#/react/route URL不能被web server读取，在web client这边window,location.hash被react router解析，http://localhost:3000/home#/home</p>
<p>Home.jsx</p>
<pre><code>import React from 'react';
export default class Home extends React.Component {
render() {
return <div>Home</div>;
}
}
</code></pre>
<p>Mine.jsx</p>
<pre><code>import React from 'react';
export default class Mine extends React.Component {
render() {
return <div>Mine</div>;
}
}
</code></pre>
<p>App.jsx</p>
<pre><code>import React from 'react';
import Home from './pages/Home';
import Mine from './pages/Mine';
// import { BrowserRouter as Router, Route } from 'react-router-dom';
import { HashRouter as Router, Route } from 'react-router-dom';
/**
* HashRouter: 锚点链接
* BrowserRouter: h5新特性 / history.push如果上线之后，需要后台做一些处理：重定向处理404bug
*/
function App() {
return (
<div className="App">
<Router>
<Route path="/home" component={Home}></Route>
<Route path="/mine" component={Mine}></Route>
</Router>
</div>
);
}
export default App;
</code></pre>
<h3 id="link跳转">Link跳转</h3>
<p>react-router里的Link标签 和 a 标签有什么区别？？<br>
从最终渲染的Dom来看，两者都是链接，都是标签，区别是：</p>
<p>Link标签： 是react-router里实现路由跳转的链接，一般配合使用，react-router 接管了其默认的链接跳转行为，区别去传统的页面跳转，的”跳转”行为只会触发相匹配的对应的页面内容更新，而不会刷新整个页面。 做了三件事情： 1.有onclick那就执行onclick 2.click的时候阻止a标签默认事件 3.根据跳转href(即是to )，用history（web前端路由两种方式之一，history & hash）跳转，此时只是链接变了，并没有刷新页面<br>
a 标签： 是普通的超链接了，用于从当前页面跳转到href指向的另一个页面（非锚点情况）。</p>
<p>index.jsx</p>
<pre><code>import React from 'react';
import { Link } from 'react-router-dom';
export default class Nav extends React.Component {
render() {
return (
<div>
<ul>
<li>
<Link to="/home">Home页面(Link)</Link>
</li>
<li>
<Link to="/mine">Mine页面(Link)</Link>
</li>
<li>
<a href="#/home">Home页面(a)</a>
</li>
<li>
<a href="#/mine">Mine页面(a)</a>
</li>
</ul>
</div>
);
}
}
</code></pre>
<p>App.jsx</p>
<pre><code>import React from 'react';
import Home from './pages/Home';
import Mine from './pages/Mine';
// import { BrowserRouter as Router, Route } from 'react-router-dom';
import { HashRouter as Router, Route } from 'react-router-dom';
import Nav from './components/Nav';
/**
* HashRouter: 秒点链接
* BrowserRouter: h5新特性 / history.push如果上线之后，需要后台做一些处理：重定向处理404bug
*/
function App() {
return (
<div className="App">
<Router>
<Nav></Nav>
<Route path="/home" component={Home}></Route>
<Route path="/mine" component={Mine}></Route>
</Router>
</div>
);
}
export default App;
</code></pre>
<h3 id="exact匹配规则和strict精准匹配">exact匹配规则和strict精准匹配</h3>
<p>exact属性为true时路径中的hash值必须和path完全一致才渲染对应的组件，如果为false则'/'也可以匹配'/xxx';（如果strict属性为false，则末尾是否包含反斜杠结尾不影响匹配结果）</p>
<p>strict属性主要就是匹配反斜杠，规定是否匹配末尾包含反斜杠的路径，如果exact，strict为true，则path中不包含反斜杠结尾。（注意：这个要跟exact配合使用）</p>
<p>总结：如果没有子路由的情况，建议大家配都加一个exact；如果有子路由，建议在子路由中加exact，父路由不加。</p>
<p>添加pages/UCenter.jsx</p>
<pre><code>import React from 'react';
const UCenter = () => {
return <div>Hello UCenter</div>;
};
export default UCenter;
</code></pre>
<p>在components/Nav/index.jsx中引入Link</p>
<pre><code>import React from 'react';
import { Link } from 'react-router-dom';
export default class Nav extends React.Component {
render() {
return (
<div>
<ul>
<li>
<Link to="/">Home页面(Link)</Link>
</li>
<li>
<Link to="/mine">Mine页面(Link)</Link>
</li>
<li>
<Link to="/mine/ucenter">UCenter页面(Link)</Link>
</li>
<li>
<a href="#/home">Home页面(a)</a>
</li>
<li>
<a href="#/mine">Mine页面(a)</a>
</li>
</ul>
</div>
);
}
}
</code></pre>
<p>App.js中引入UCenter组件</p>
<pre><code>import React from 'react';
import Home from './pages/Home';
import Mine from './pages/Mine';
// import { BrowserRouter as Router, Route } from 'react-router-dom';
import { HashRouter as Router, Route } from 'react-router-dom';
import Nav from './components/Nav';
import UCenter from './pages/UCenter';
/**
* HashRouter: 秒点链接
* BrowserRouter: h5新特性 / history.push如果上线之后，需要后台做一些处理：重定向处理404bug
*/
/**
* /mine/ucenter 包含了 /mine
*/
function App() {
return (
<div className="App">
<Router>
<Nav></Nav>
<Route exact path="/" component={Home}></Route>
<Route
strict
exact={true}
path="/mine"
component={Mine}
></Route>
<Route
strict
exact
path="/mine/ucenter"
component={UCenter}
></Route>
</Router>
</div>
);
}
export default App;
</code></pre>
<h3 id="404页面和switch">404页面和Switch</h3>
<p>有<switch>标签，则其中的<route>在路径相同的情况下，只匹配第一个，这个可以避免重复匹配；<br>
无<switch>标签，则其中的<route>在路径相同的情况下全都会匹配。更严重的是，还会匹配上级路径的</route></switch></route></switch></p>
<p>添加404页面组件：/pages/NotFound.jsx</p>
<pre><code>import React from 'react';
const NotFound = () => {
return <div>404页面</div>;
};
export default NotFound;
</code></pre>
<p>App.js中引入NotFound组件</p>
<pre><code>import React from 'react';
import Home from './pages/Home';
import Mine from './pages/Mine';
// import { BrowserRouter as Router, Route } from 'react-router-dom';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import Nav from './components/Nav';
import UCenter from './pages/UCenter';
import NotFound from './pages/NotFound';
/**
* HashRouter: 秒点链接
* BrowserRouter: h5新特性 / history.push如果上线之后，需要后台做一些处理：重定向处理404bug
*/
/**
* /mine/ucenter 包含了 /mine
*/
function App() {
return (
<div className="App">
<Router>
<Nav></Nav>
<Switch>
<Route exact path="/" component={Home}></Route>
<Route
strict
exact={true}
path="/mine"
component={Mine}
></Route>
<Route
strict
exact
path="/mine/ucenter"
component={UCenter}
></Route>
<Route component={NotFound}></Route>
</Switch>
</Router>
</div>
);
}
export default App;
</code></pre>
<h3 id="render-func">render func</h3>
<p>新建一个组件pages/Demo.jsx</p>
<pre><code>import React from 'react';
const Demo = (props) => {
console.log(props);
return <div>Demo: {props.name}</div>;
};
export default Demo;
</code></pre>
<p>App.js</p>
<pre><code>import React from 'react';
import Home from './pages/Home';
import Mine from './pages/Mine';
// import { BrowserRouter as Router, Route } from 'react-router-dom';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import Nav from './components/Nav';
import UCenter from './pages/UCenter';
import NotFound from './pages/NotFound';
import Demo from './pages/Demo';
/**
* HashRouter: 秒点链接
* BrowserRouter: h5新特性 / history.push如果上线之后，需要后台做一些处理：重定向处理404bug
*/
/**
* /mine/ucenter 包含了 /mine
*/
function App() {
return (
<div className="App">
<Router>
<Nav></Nav>
<Switch>
<Route exact path="/" component={Home}></Route>
<Route
strict
exact={true}
path="/mine"
component={Mine}
></Route>
<Route
strict
exact
path="/mine/ucenter"
component={UCenter}
></Route>
{/* <Route
path="/demo"
render={() => <div>Hello Demo</div>}
></Route> */}
<Route
path="/demo"
render={(props) => <Demo {...props} name="你好" />}
></Route>
<Route component={NotFound}></Route>
</Switch>
</Router>
</div>
);
}
export default App;
</code></pre>
<h3 id="navlink高亮">NavLink高亮</h3>
<p>components/Nav/index.jsx</p>
<pre><code>import React from 'react';
import { NavLink } from 'react-router-dom';
import './style.css';
export default class Nav extends React.Component {
render() {
return (
<div>
<ul>
<li>
<NavLink
activeClassName="selected"
activeStyle={{ color: 'green' }}
exact
to="/"
>
Home页面(Link)
</NavLink>
</li>
<li>
<NavLink activeClassName="selected" exact to="/mine">
Mine页面(Link)
</NavLink>
</li>
<li>
<NavLink
activeClassName="selected"
exact
to="/mine/ucenter"
>
UCenter页面(Link)
</NavLink>
</li>
<li>
<a href="#/home">Home页面(a)</a>
</li>
<li>
<a href="#/mine">Mine页面(a)</a>
</li>
</ul>
</div>
);
}
}
</code></pre>
<p>components/Nav/style.css</p>
<pre><code>.selected{
color: red;
}
</code></pre>
<p>App.js</p>
<pre><code>import React from 'react';
import Home from './pages/Home';
import Mine from './pages/Mine';
// import { BrowserRouter as Router, Route } from 'react-router-dom';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import Nav from './components/Nav';
import UCenter from './pages/UCenter';
import NotFound from './pages/NotFound';
import Demo from './pages/Demo';
/**
* HashRouter: 秒点链接
* BrowserRouter: h5新特性 / history.push如果上线之后，需要后台做一些处理：重定向处理404bug
*/
/**
* /mine/ucenter 包含了 /mine
*/
function App() {
return (
<div className="App">
<Router>
<Nav></Nav>
<Switch>
<Route exact path="/" component={Home}></Route>
<Route
strict
exact={true}
path="/mine"
component={Mine}
></Route>
<Route
strict
exact
path="/mine/ucenter"
component={UCenter}
></Route>
{/* <Route
path="/demo"
render={() => <div>Hello Demo</div>}
></Route> */}
<Route
path="/demo"
render={(props) => <Demo {...props} name="你好" />}
></Route>
<Route component={NotFound}></Route>
</Switch>
</Router>
</div>
);
}
export default App;
</code></pre>
<h3 id="parameters">Parameters</h3>
<p>App.js</p>
<pre><code>import React from 'react';
import Home from './pages/Home';
import Mine from './pages/Mine';
// import { BrowserRouter as Router, Route } from 'react-router-dom';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
import Nav from './components/Nav';
import UCenter from './pages/UCenter';
import NotFound from './pages/NotFound';
import Demo from './pages/Demo';
/**
* HashRouter: 秒点链接
* BrowserRouter: h5新特性 / history.push如果上线之后，需要后台做一些处理：重定向处理404bug
*/
/**
* /mine/ucenter 包含了 /mine
*/
function App() {
return (
<div className="App">
<Router>
<Nav></Nav>
<Switch>
<Route exact path="/" component={Home}></Route>
<Route
strict
exact={true}
path="/mine"
component={Mine}
></Route>
<Route
strict
exact
path="/mine/ucenter/:id?/:name?"
component={UCenter}
></Route>
{/* <Route
path="/demo"
render={() => <div>Hello Demo</div>}
></Route> */}
<Route
path="/demo"
render={(props) => <Demo {...props} name="你好" />}
></Route>
<Route component={NotFound}></Route>
</Switch>
</Router>
</div>
);
}
export default App;
</code></pre>
<p>components/Nav/index.jsx</p>
<pre><code>import React from 'react';
import { NavLink } from 'react-router-dom';
import './style.css';
export default class Nav extends React.Component {
render() {
return (
<div>
<ul>
<li>
<NavLink
activeClassName="selected"
activeStyle={{ color: 'green' }}
exact
to="/"
>
Home页面(Link)
</NavLink>
</li>
<li>
<NavLink activeClassName="selected" exact to="/mine">
Mine页面(Link)
</NavLink>
</li>
<li>
<NavLink
activeClassName="selected"
exact
to="/mine/ucenter/1001/liang"
>
UCenter页面(Link)
</NavLink>
</li>
<li>
<a href="#/home">Home页面(a)</a>
</li>
<li>
<a href="#/mine">Mine页面(a)</a>
</li>
</ul>
</div>
);
}
}
</code></pre>
<p>pages/UCenter.jsx</p>
<pre><code>import React from 'react';
const UCenter = (props) => {
return (
<div>
Hello UCenter: {props.match.params.id} - {props.match.params.name}
</div>
);
};
export default UCenter;
</code></pre>
<h3 id="react-router-querystring读取参数">React-Router querystring读取参数</h3>
<p>另外一种传参<br>
pages/UCenter.jsx</p>
<pre><code>import React from 'react';
import querystring from 'querystring';
const UCenter = (props) => {
const params = new URLSearchParams(props.location.search)
console.log(params);
console.log(params.get('name'));
const value = querystring.parse(props.location.search);
console.log(value);
return (
<div>
Hello UCenter: {props.match.params.id} - {props.match.params.name}
</div>
);
};
export default UCenter;
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1421450/202104/1421450-20210416001212877-1824533534.png" alt="" loading="lazy"></p>
<p>持续更新中......</p>
</div>
<div id="MySignature" role="contentinfo">
砥砺前行<br><br>
来源：https://www.cnblogs.com/lhongsen/p/14410233.html
頁:
[1]