React Router路由细讲（一基本组件）

由于它的路由已经是v4版本，所以我这里以这个版本进行讲解。

路由一般分为三种：1、路由组件 2、路由匹配组件 3、路由导航组件。

一、先讲基本的路由组件：

1、首先我们新建react项目：

npm install -g create-react-app 
create-react-app demo-app 
cd demo-app

2、然后安装路由：

npm install react-router-dom

3、在页面里面引入路由

import React from "react";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

对于Web项目，react-router-dom提供和路由器。这两个都将为您创建一个专门的history对象。如果您有一个响应请求的服务器，那么你使用它，如果您使用静态文件服务器，那么使用它

二、路由匹配（1）

有两个路由匹配组件：

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function Index() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

function AppRouter() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about/">About</Link>
            </li>
            <li>
              <Link to="/users/">Users</Link>
            </li>
          </ul>
        </nav>
        
        <Route path="/" exact component={Index} />
        <Route path="/about/" component={About} />
        <Route path="/users/" component={Users} />
      </div>
    </Router>
  );
}
export default AppRouter;

相信这个对于大家来说都能够理解。也不多说

细节注意

1、组件首字母要大写才行。
2、然后关于那个exact的话，你应当把它写上，如果不写就会导致当你点击Index以外的路由，index内容会依旧占据位置的，没有从页面移除

3、Router标签应该包含整个内容。不能像下面这样。不然结果也是不成功的。

其实这个也算是一个路由匹配的路由，通过path来让对应的路由出来。如果你不写path那么也会造成和刚才不要exact一样的结果。Index 会一直在。

二、路由匹配（2）

上面这个路由会导致一个什么问题？后来才知道，这样写的话你所涉及路由都会被渲染的，而不能唯一的渲染想要的那一个，所以switch出现了，就为了解决这个问题。

用法请转到这里。https://www.cnblogs.com/yesu/p/10929646.html
我不知道是不是苹果电脑原因，它那里的地址和我这个不太一样。我没有中间那个#符号。![在这里插入图片描述]

三、路由导航

这里又分为三种：
1、Link
2、NavLink
3、Redirect
自然你也要引入。

import { BrowserRouter as Router, Route, Link ,NavLink,Redirect} from "react-router-dom";

1、Link就不说了，和上面路由匹配里面一样的。
2、NavLink.它可以有一个当你点击之后的样式和类。这个类你就可以写样式，或者直接在后面写样式。

 <NavLink to="/contact" activeClassName="hurray" activeStyle={{fontSize: "30px"}}>
       React
  </NavLink>

访问前

访问后

3、当你想强制性的跳转时候，那你就可以使用它。

<Redirect to="/home" ></Redirect>

页面一进来就是这个路由。