React中 react-router-dom 路由的基本使用

一、安装

npm install react-router-dom --save

二、基础的使用

1. 新建一个Router.js文件，至于在哪里新建，你开心就好。

import React from 'react'; 
//引入需要用到的页面组件 
import Home from './pages/home';// 这里是我的路径，测试请修改为自己的路径
import About from './pages/about';// 这里是我的路径，测试请修改为自己的路径
//引入一些模块
import { BrowserRouter as Router, Route} from "react-router-dom";

function router(){
return (
<Router>
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
</Router>);
}

export default router;

**2. 新建两个组件页面 ，这里以 home 和 about 为例

home.js

//home.js
import React, { Component } from 'react';

export default class Home extends Component {
  render() {
    return (<h1>
      欢迎，这里是Home
    </h1>)
  }
}

about.js

//about.js
import React, { Component } from 'react';

export default class About extends Component {
  render() {
    return (<h1>
      欢迎，这里是About
    </h1>)
  }
}

3. 然后我们在app.js中引入路由文件即可

import Router from './Router' // 这里是我的路径，测试请修改为自己的路径
class App extends React.Component {
	render(){
		return (
		  <Router />
		);
	}
}

4. 如果你根据上面的内容操作完以后，你应该可以看到如下页面

三、嵌套路由

当我们需要页面的局部变换的时候，就需要用到这个了。比如说标题栏不变，内容根据路由地址引入不同的模块~

1. 在需要嵌套路由的地方，加上

   {this.props.children} //这里就是嵌套路由展示的地方
   

   比如我们现在要给about加一个子路由other，
   那么我们首先需要改写about.js文件

   //about.js
   import React, { Component } from 'react';
   
   export default class About extends Component {
     render() {
       return (<h1>
         欢迎，这里是About
         {this.props.children}  //这里就是嵌套路由展示的地方
       </h1>)
     }
   }
   

2. 然后再更改router.js路由文件

   //前面的引入就省略了，查看上一章节即可
   //新引入一个ohter组件，用于渲染嵌套路由,other内容和前面的home.js一样
   import Ohter from './pages/other';
   
   function router(){
   return (
   <Router>
       <Route path="/home" component={Home} />
       <Route path="/about" render={()=>(
         <About>
           <Route path="/about/other" component={Other} />
         </About>
       )}>
       </Route>
   </Router>);
   }
   export default router;
   

3. 然后就可以在浏览器看到效果啦，可以看到other组件嵌套在了about里面
   

注意事项
1） render={()=>对象} 这里的对象不需要大括号噢，如果你熟悉箭头语法的话，那么应该不用我多说
2）拥有子路由的路由不能添加 exact属性，不然会无法访问到子组件

四、重定向

有时候，我们需要把 “/” 重定向到我们的主页，这样用户直接输入 “www.XXX.com” 就可以了，而不用输入 "www.XXX.com/home "。

//router.js
//需要import一下Redirect
import {Redirect} from "react-router-dom";

return (
<Router>
    <Route path="/home" component={Home} />
    <Route path="/" render={
      ()=> (
      <Redirect to="/home"/>  // 重定向
      )}>
    </Route>
</Router>);
}
export default router;