跳至主要内容

[ReactRouter] 基礎 Basic

💡 使用版本 ^5.0.0

React Router 的基本原理

基本用法

建立路由

keywords: BrowserRouter, Route, Switch
import { BrowserRouter, Route, Switch } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(
<Provider store={store}>
<BrowserRouter>
<div>
// 原本的 router 只要能夠符合到前面的 path,該 component 就會被轉譯 // 透過
Switch,則是配對到符合的路由後,後面其他的就不在匹配(因此順序重要)
<Switch>
<Route path="/posts/new" component={PostsNew} />
<Route path="/" component={ComponentName} />
</Switch>
</div>
</BrowserRouter>
</Provider>
);

不用 <Switch> 的另一種方式是使用 exact 就好,只有在完全匹配到的時候才會顯示該路由的元件:

<Route path="/" component={ComponentName} exact />

建立連結

使用 <Link></Link> 最後一樣會顯示為 <a></a> 標籤,差別在於 <Link> 會擋掉瀏覽器的一些預設行為,避免發出真正的 HTTP 請求:

import { Link } from 'react-router-dom';

<div className="text-right mb-4">
<Link className="btn btn-primary" href="#" role="button" to="/posts/new">
Add a Post
</Link>
</div>;

取得 Routes 中提供的屬性

當我們使用 <Router path="/foo" component={bar}> 後,這個 bar component 中就會包含有由 React-Router 所提供的許多屬性可以使用,其中主要包含:

  • match
  • location
  • history
  • staticContext
{
"match": {
"path": "/topics",
"url": "/topics",
"isExact": false,
"params": {}
},
"location": {
"pathname": "/topics/components",
"search": "",
"hash": "",
"key": "7m8jwd"
},
"history": {
"length": 36,
"action": "POP",
"location": {
"pathname": "/topics/components",
"search": "",
"hash": "",
"key": "7m8jwd"
}
}
}

如果某一元件並不是透過 <Route>component 屬性進入,但是又希望能拿到這些相關資訊,則可以使用 withRouter 這個 HOC 來取得這些資訊:

const App = () => { ... };
export default withRouter(App);

/* 搭配 Redux */
// This gets around shouldComponentUpdate
withRouter(connect(...)(MyComponent))
// or
compose(
withRouter,
connect(...)
)(MyComponent)

其他

將參數傳到 component 中

<Route> 中可以使用 render 方法,其中可以透過 props 這個參數取得原本 Routes 所提供的屬性使用:

// 在 TestWidget 中會多 num 和 someProp 這兩個參數可以拿到
import TestWidget from '@/components/TestWidget';

<Route path="/abc" render={(props) => <TestWidget num="2" someProp={100} {...props} />} />;

Allow passing props to Route to be passed down to the component it renders @ React-Router Github How to pass props to components when you use Route attribute ? @ React-Router Github