reacr路由

（react-router-dom自行百度命令行添加包）

在 index.js 中添加

import { HashRouter as Router} from 'react-router-dom'
import {Router} from 'react-router-dom'

import App from './App.js';//引入自己写的组件

​ ReactDOM.render( 
//使用 Router 包裹最外层组件 
　　　　<Router> 
　　　　　　<App /> 
　　　　</Router>,
 document.getElementById('root') );

在 App.js 中

import { Route, Redirect, Switch } from 'react-router-dom';
import index form'../index.js';
import home form'../home.js'
​
export default class App extends Component {
  render() {
    return (
      <div>
        {/* 使用 */}
        <Switch>
          <Route path="/index" component={index} exact></Route>
          <Route path="/home" component={home} exact></Route>
          <Route path="/article/:id" component={ArticleDetail}></Route>

　　　　　　<Redirect to='/index'/> //重定向

　　　　　</Switch>
 </div> ) } }

• Route

  • path = "路径"

  • component = {组件} { Route Component }

  • exact 完全匹配， 默认是模糊匹配。模糊匹配以一个目录为准 如匹配“/home” : "/home/hdsfhs"能匹配到 ，“/homedfsdfsdfadsf”匹配不上

• Redirect

• to=" 路径 " 重定向路径

• index.js 中

• import { Link } from 'react-router-dom'
  import { NavLink as Link } from 'react-router-dom'
  ​
  <Link to="/home">文章1</Link>
  <Link to="/article/1">文章2</Link>

路由传参的问题可看我之前发表的文章  https://www.cnblogs.com/zxm1993/p/10710417.html