Day22 React-Router

Router(路由)，是用以规画网站路径用，React Router是根据URL 中使用的Route（/对於主页、/about关於页面等）有条件地呈现页面组件加以显示。

如何使用 React Router：

1.首先使用 NPM 安装：

react-router-dom 安装页面

npm install --save react-router-dom

2.在index.js页面中导入 BrowserRouter模组，并加入<BrowserRouter>标签

import { BrowserRouter } from “react-router-dom”
ReactDOM.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>, 
    document.getElementById('root')
);

3.在App.js页面中导入Route 和 Switch 模组,接下来在App 组件中，添加<Switch>和<Route>标签,在<Route>标签内添加path属性和要加载的组件名称component属性。
在主页的path前面添加exact，告诉应用程序它是第一页，它会加载第一个匹配路由的URL。

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

4.如果有子页面，例如在contact的页面下还有child子页面，这时必需在contact的path前面加上exact，才不会导致找不到画面

 <Route  exact path="/contact" component = {Contact} />

5.必需编写一个Error组件，如果用户输入了错误的 URL，它就会加载Error组件， 不要忘记将其导入应用程序。

最後程序如下：

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import Error from './Error';

const App = () => {
  const Child =()=>{
    return <h1>This is Child Page!</h1>;
  }
  return (
    <div>    
       <Switch>
         <Route exact path="/" component = {Home} />
         <Route  path="/about" component = {About} />
         <Route  exact path="/contact" component = {Contact} />
         <Route  path="/contact/child" component = {Child} />
         <Route  component = {Error} />
       </Switch>  
    </div>
  )
}
export default App