match.path指的是返回当前组件所对应的path
match.url指的是当前组件真实的url
如果还有些模糊,看下面的例子就明白了
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const App = () => (
<Router>
<div>
<Header />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</div>
</Router>
);
const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Topic = (props) => {
console.log(props.match)
return(<h3>Requested Param: {props.match.params.id}</h3>)
};
const Topics = ({ match }) => {
console.log(match);
return (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/components`}>Components</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>Props v. State</Link>
</li>
</ul>
<Route path={`${match.path}/:id`} component={Topic} />
<Route
exact
path={match.path}
render={() => <h3>Please select a topic.</h3>}
/>
</div>
)};
const Header = () => (
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
<li>
<Link to="/topics">Topics</Link>
</li>
</ul>
);
export default App;
打印出的match里的path和url