資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究React.js 中的路由導航
我們有一個 index.js 檔案，如下所示：
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter } from 'react-router-dom'
import App from './App'
import AboutUs from './ AboutUs’;
import ContactUs from './ContactUs';
const routs = (
< BrowserRouter >
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/ aboutus ">Users</Link>
</li>
<li>
<Link to="/ contactus ">Contact</Link>
</li>
</ul>
<Route exact path="/" component={App} />
<Route path="/aboutus" component={AboutUs} />
<Route path="/contactus" component={ContactUs} />
</div>
</ BrowserRouter >
);
ReactDOM.render(routs, document.getElementById('root'))現在，我們將在頁面上提供連結進行導航，而不是在瀏覽器中手動輸入 url。
react-router-dom 提供的 Link 元件有助於建立不會重新載入頁面本身的錨定標記。
如果我們使用 html 提供的預設錨定標記，它將在導航時重新載入頁面。但是由於我們只有一個 index.html 頁面，並且我們只是導航到其他 jsx 元件，因此我們不必讓頁面重新載入。
如何新增 404 頁面
當給定的 index.jsx 檔案中的路由中沒有路徑匹配時，將顯示 404 頁面。
讓我們為 404 錯誤建立一個頁面。
ErrorPage.jsx
import React from 'react' const ErrorPage = () => <h1>Page Not found</h1> export default ErrorPage
我們將使用 react-router-dom 提供的 switch 元件來確定路徑。
如果沒有找到匹配的路徑，我們將預設使用 Errorpage。
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter, Switch } from 'react-router-dom'
import App from './App'
import AboutUs from './AboutUs'
import ContactUs from './ContactUs'
import ErrorPage from './ ErrorPage';
const routs = (
< BrowserRouter >
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/aboutus">About us</Link>
</li>
<li>
<Link to="/contactus">Contact us</Link>
</li>
</ul>
<Switch>
<Route exact path="/" component={App} />
<Route path="/aboutus" component={AboutUs} />
<Route path="/contactus" component={ContactUs} />
<Route component={ErrorPage} />
</Switch>
</div>
</ BrowserRouter >
);
ReactDOM.render(routs, document.getElementById('root'));在 switch 元件中，我們沒有為 error 頁面提供任何路徑，因為它是 switch 語句中的最後一個元件。它是 switch 的預設語句。
網址引數
它幫助動態地為我們提供了網址引數，如
<Route path="conatctus/:id" component={ContactUs} />在 index.jsx 檔案中
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter, Switch } from 'react-router-dom'
import App from './App'
import AboutUs from './ AboutUs '
import ContactUs from './ ContactUs '
import ErrorPage from './ ErrorPage ';
const routs = (
< BrowserRouter >
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/aboutus">About Us</Link>
</li>
<li>
<Link to="/contactus">Contact Us</Link>
</li>
</ul>
<Switch>
<Route exact path="/" component={App} />
<Route path="/aboutus/:id" component={AboutUs} />
<Route path="/contactus" component={ContactUs} />
<Route component={ErrorPage} />
</Switch>
</div>
</ BrowserRouter >
);
ReactDOM.render(routs, document.getElementById('root'));現在我們在 aboutus 網址中有一個動態值，名為 id
如何訪問元件中的網址引數
import React from 'react';
class AboutUs extends React.Component {
render() {
const { params } = this.props.match
return (
<div>
<h1>About Us</h1>
<p>{params.id}</p>
</div>
)
}
}
export default AboutUs網址引數可用於 props 中。我們可以獲取它，方法如下 -
const { params } = this.props.match;
更新日期：04-Sep-2019
6K+ 瀏覽量
廣告