react-router学习 #19

Vxee · 2018-11-17T08:02:13Z

由于我看的是4.X版本，有些用法和2、3版本有点区别。

Link 需要从react-router-dom中去引用。

Route不允许这样嵌套。

<Route path="/" component={Home} >
	<Route path="about" component={About} />
	<Route path="inbox" component={Inbox} />
	<Route render={() => <h6>404</h6>} />
</Route>

应该是平级的书写方式

<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/inbox" component={Inbox} />
<Route render={() => <h6>404</h6>} />

可以嵌套一个Switch来只匹配一个组件渲染。

import { Route } from 'react-router';
import { Switch } from 'react-router-dom';

<Switch>
	<Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/inbox" component={Inbox} />
    // 当没有任何匹配时，会渲染一个404
    <Route render={() => <h6>404</h6>} />
</Switch>

路径匹配语法

<Route path="/hello/:name">         // 匹配 /hello/michael 和 /hello/ryan
<Route path="/hello(/:name)">       // 匹配 /hello, /hello/michael 和 /hello/ryan
<Route path="/files/*.*">           // 匹配 /files/hello.jpg 和 /files/path/to/hello.jpg

withRouter

import { withRouter } from 'react-router';

const ShowTheLocation = ({ match, location, history}) => {
    return (
    	<div>You are now at {location.pathname}</div>
    );
}
export default withRouter(ShowTheLocation);

withRouter是一个hoc，可以把路由的一些信息当作props传递到组件中，并返回一个新的组件。

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

react-router学习 #19

react-router学习 #19

react-router学习 #19

react-router学习 #19

Comments

路径匹配语法