react-router-dom基本使用

紹介する
reactプロジェクトの開発過程でよく遭遇する、ページジャンプなどのルーティング関連イベントは、これらをよりよく処理するためにreactルーティング関連のパッケージに応用する必要がある.含む:react-router、react-router-dom、react-router-native

react-routerは、ルーティングのコア機能

のみを実現する.

react-router-domは、react-routerに基づいて、いくつかのブラウザ実行環境のいくつかの機能を追加しました.例えば、Linkコンポーネントは、aラベルをレンダリングします.BrowserRouterとHashRouterコンポーネントは、前者はpushStateとpopStateイベントを使用してルーティングを構築し、後者はwindowを使用する.location.hashとhashchangeイベントはルーティングを構築します.

react-router-nativeは、react-routerに基づいてreact-router-domのように、react-native実行環境のいくつかの機能を追加しています.

本稿では,SPAウェブ開発におけるreactのルーティング,すなわちreact-router-domを用いて解決したルーティング問題について主に紹介する.react-router-domクイック使用
まずSPA web開発では,ページとアドレスを1つずつマッチングさせるルーティングが必要である.

import React, {Component} from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Home from './pages/Home/Home';
import About from './pages/About/About';
import ErrorPage from './pages/ErrorPage/ErrorPage'; //   404   
class App extends Component {
	render(){
		return (
			<Router>
				<Switch>
					<Route path='/' component={Home} exact>
					<Route path='/about' component={About}>
					<Route component={ErrorPage}>
				</Switch>
			</Router>
		);
	}
}
export default App;

ここで,Routeが対応するのがページであり,その中のpath属性が対応する場合のアドレスである.たとえば、http://localhost:3000にホームページが表示され、http://localhost:3000/aboutにアクセスするとAboutページが表示されます.このうちexactは厳密に一致している.すなわち、この属性が追加されていない場合、http://localhost:3000にアクセスしてもhttp://localhost:3000/aboutにアクセスしてもホームページの内容が表示される.
ナビゲーションバーにも使用する必要があるかもしれません
ホームページにナビゲーションバーがある場合

import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
import Style from './Home.module.css'; // create-react-app          css   ，   css                        。
class Home extends Component {
	render(){
		return (
			<div>
				<NavLink
					to='/'
					className={Style.navLink}
	                activeClassName={Style.active}
                >
	                  
				</NavLink>
				<NavLink to='/about' className={Style.navLink}>
					  
				</NavLink>
			</div>
		);
	}
}
export default Home;

NavLink、ナビゲーションリンクを設定するために使用され、activeClassNameのプロパティは、アクティブ化時に一致するスタイルを設定するために使用される
通常のリンクにジャンプする必要があります
一般リンクジャンプはLinkコンポーネント、またはaラベルを直接使用します.

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
class Test extends Component {
	render (){
		return (
			<div>
				<Link to='/test'>Link  </Link>
				<a href='/test'>a    </a>
			</div>
		);
	}
}
export default Test;

後退ボタンを使用する必要があります
後退ボタンは通常のボタンを使用し、クリックを加えることができます.window.history.back()、またはthis.props.history.goBack()を使用できます.

import React, {Component} from 'react';
class Test extends Component {
	constructor(props){
		super(props);
	}
	handleClick1 = ()=>{
		window.history.back();
	}
	handleClick2 = ()=>{
		this.props.history.goBack();
	}
	render (){
		return (
			<div>
				<button onClick={this.handleClick1}>button1</button>
				<button onClick={this.handleClick2}>button2</button>
			</div>
		);
	}
}
export default Test;

this.props.history.goBack()を使用して後退すると、コンポーネントの初期化時に親コンポーネントのpropsが継承されることに注意してください.
react-router-domの詳細
以下を参照してください.https://blog.csdn.net/wang19970228/article/details/95305549
気に入らないなら噴き出さないで、間違いがあったらコメントして指摘してほしい.