Skip to content

32 - 404 Pages & Next Steps

首先写一个NotFound.js页面:

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

const NotFound = () => {
  return (  
    <div className="not-found">
      <h2>Opps!</h2>
      <p>page not found.</p>
      <div style={{marginTop: "20px"}}>
      <Link to="/" >Go back home ..</Link>
      </div>
      
    </div>
  );
}
 
export default NotFound;

然后在App.js中匹配路由

jsx
<Switch>
	<Route exact path="/">
		<Home /> 
	</Route>
	<Route exact path="/create">
		<Create />
	</Route>
	<Route exact path="/blogs/:id">
		<BlogDetails />
	</Route>
	<Route path="*">
		<NotFound />
	</Route>
</Switch>

path="**" 表示任意路径,需要放在最下面,作为一个catch-all路由。

Released under the MIT License.