1つの文章でreactルートを使うことができます

reactルーティング
react-router-domのインストール

npm     npm i react-router-dom
yarn    yarn add react-router-dom

本番環境の依存にダウンロードします.
導入モジュール
react足場srcディレクトリの下にあるindex.jsにインストールされたreact-router-domプラグインを導入

import { BrowserRouter as Router } from 'react-router-dom'

真ん中にas

があるのを見ました

このasは、現在の名前に小さな名前、別名を付けることを意味します.

BrowserRouterを導入しようとしたが、この名前は長すぎて面白くないようだ.

では、BrowserRouterの代わりにRouterを使用します.

hashルーティングを使用してBrowserRouterをHashRouter

に変更すると

それから私たちの別名であるRouterを使ってアプリのコンポーネントを包んでいます.

ReactDOM.render(
  <Router>
    <App />
  </Router>, document.getElementById('root'));

導入経路

ルーティングジャンプを使用する必要があるコンポーネントにreact-router-dom

を導入する

import { Route,NavLink,Redirect,Switch} from 'react-router-dom'

Route

は、異なるパスに対応する異なるコンポーネントまたはページ表示を制御するための重要なコンポーネントであり、

.

でよく使われる属性は、

です.

path:一致するパス

component:一致するコンポーネント

NavLink

NavLinkはLinkの特定バージョンで、現在のURLに一致するときにレンダリングされた要素にスタイルパラメータactiveを追加し、クリックカラー

を設定できます.
Redirect

ルーティングリダイレクト

用

プロパティ

to文字列、リダイレクトするパス

fromは、ルーティングの元の値を指定するために使用され、指定された文字列でなければレンダリングされず、逆にレンダリングされず、switchコンポーネントの

にのみ使用されます.

Switch

Switchコンポーネントの内部には、RouteまたはRedirectがあり、一致する最初の要素

のみがレンダリングされます.
ルーティングの使用

//               one    two
export fefault class App extends Component{
  render(){
    return(
	  <div>
		 <NavLink to='one'>one  </Navlink>
		 <NavLink to='two'>two  </Navlink>
				
		 <Switch>
       	   <Route path="/one" component={one} />
     	   <Route path="/two" component={two} />
      	   <Redirect from='/' to='/one' exact/>   {/*         */}
         </Switch>{/*                */}
	  </div>
		)
	}
}

ジャンプサブルート

ジャンプ後にRouteを設定してレンダーする必要があります

の2つの構成パスは、親パス/子パス

のフルパスで構成する必要があります.
ルートの初体験はできましたか?