碼上快樂

相關內容    簡體    繁體

React-Router路由配置

本文轉載自   查看原文   2021-02-17 23:28   1594    react學習筆記

React-Router

參考學習地址: https://reactrouter.com/web/guides/quick-start

// 5 的版本主要是針對 react Hook 做更好的支持

  1. 安裝
    npm install react-router-dom --save

  2. 路由的作用
    單頁面應用（SPA），路由跳轉，切換顯示視圖

HashRouter與BrowserRouter區別

BrowserRouter：
　　原理是H5的history API，IE9及以下不兼容，需要由web server支持，在web client這邊window.location.pathname被react router解析，http://localhost:3000/home

HashRouter：
　　原理是URL的hash，不需要由web server支持，因為它的只有‘/’path需要由web server支持，而#/react/route URL不能被web server讀取，在web client這邊window,location.hash被react router解析，http://localhost:3000/home#/home

Home.jsx

import React from 'react';


export default class Home extends React.Component {
	render() {
		return <div>Home</div>;
	}
}

Mine.jsx

import React from 'react';


export default class Mine extends React.Component {
	render() {
		return <div>Mine</div>;
	}
}

App.jsx

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;

Link跳轉

react-router里的Link標簽 和 a 標簽有什么區別？？
從最終渲染的Dom來看，兩者都是鏈接，都是標簽，區別是：

Link標簽： 是react-router里實現路由跳轉的鏈接，一般配合使用，react-router 接管了其默認的鏈接跳轉行為，區別去傳統的頁面跳轉，的”跳轉”行為只會觸發相匹配的對應的頁面內容更新，而不會刷新整個頁面。 做了三件事情： 1.有onclick那就執行onclick 2.click的時候阻止a標簽默認事件 3.根據跳轉href(即是to )，用history（web前端路由兩種方式之一，history & hash）跳轉，此時只是鏈接變了，並沒有刷新頁面
a 標簽： 是普通的超鏈接了，用於從當前頁面跳轉到href指向的另一個頁面（非錨點情況）。

index.jsx

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>
		);
	}
}

App.jsx

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;

exact匹配規則和strict精准匹配

exact屬性為true時路徑中的hash值必須和path完全一致才渲染對應的組件，如果為false則'/'也可以匹配'/xxx';（如果strict屬性為false，則末尾是否包含反斜杠結尾不影響匹配結果）

strict屬性主要就是匹配反斜杠，規定是否匹配末尾包含反斜杠的路徑，如果exact，strict為true，則path中不包含反斜杠結尾。（注意：這個要跟exact配合使用）

總結：如果沒有子路由的情況，建議大家配都加一個exact；如果有子路由，建議在子路由中加exact，父路由不加。

添加pages/UCenter.jsx

import React from 'react';

const UCenter = () => {
	return <div>Hello UCenter</div>;
};

export default UCenter;

在components/Nav/index.jsx中引入Link

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>
		);
	}
}

App.js中引入UCenter組件

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;

404頁面和Switch

有 標簽，則其中的 在路徑相同的情況下，只匹配第一個，這個可以避免重復匹配；
無 標簽，則其中的 在路徑相同的情況下全都會匹配。更嚴重的是，還會匹配上級路徑的

添加404頁面組件：/pages/NotFound.jsx

import React from 'react';

const NotFound = () => {
	return <div>404頁面</div>;
};

export default NotFound;

App.js中引入NotFound組件

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;

render func

新建一個組件pages/Demo.jsx

import React from 'react';

const Demo = (props) => {
	console.log(props);
	return <div>Demo: {props.name}</div>;
};

export default Demo;

App.js

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;

components/Nav/index.jsx

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>
		);
	}
}

components/Nav/style.css

.selected{
    color: red;
}

App.js

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;

Parameters

App.js

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;

components/Nav/index.jsx

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>
		);
	}
}

pages/UCenter.jsx

import React from 'react';

const UCenter = (props) => {
	return (
		<div>
			Hello UCenter: {props.match.params.id} - {props.match.params.name}
		</div>
	);
};

export default UCenter;

React-Router querystring讀取參數

另外一種傳參
pages/UCenter.jsx

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;

持續更新中......


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 react-router 4 路由的嵌套 React-router 配置browserHistory react 路由react-router 及react-router-dom的區別 react-router 路由跳轉遇到的坑 react-router中的路由鈎子使用 react-router之嵌套路由 我對於react-router路由原理的學習 React-Router JS控制路由跳轉 react-router 配置404 頁面 react-router 簡單的nginx配置
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM