react路由篇:利用路由实现顶部导航效果

前提说明

react使用typescript来编写代码;
路由使用’@types/react-router-dom’;

利用路由实现-顶部导航,点击顶部导航,出现不同的内容;

要实现的效果

首页有四个菜单(首页,二页,Ⅲ页,肆页),点击不用的菜单显示不同的页面内容,但是顶部导航始终存在页面顶部;首页中有个跳转登录页的链接,点击直接跳转至登录页面,页面中不在显示顶部菜单

效果图

首页效果

点击首页效果

点击二页效果

点击三页效果

点击肆页效果

首页点击跳转登录页效果

当跳转的页面不存在时效果

具体代码

项目目录

一些说明:
路由需要由路由器管理,BrowserRouter和HashRouter相当于路由器;Route相当于路由;
LInk或者NavLink与Route需要被路由器包裹,否则路径跳转了但是组件不会渲染的情况;
NavLink有一个属性activeClassName,可是设置激活的链接样式设置; Redirect
的作用:当所有路由都无法匹配时，跳转到Redirect指定的路由;

src/index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter,Link,Route,Switch,Redirect,HashRouter} from 'react-router-dom';
import './index.css';
import App from './App';
import Login from './views/Login';
import ErrerPage from './views/Error';

ReactDOM.render(
  <HashRouter>
    <Link to='/index'></Link>
    <Link to='/login'></Link>
    <Link to='/errorpage'></Link>
    <Switch>
      <Route path='/index' component={App}></Route>
      <Route path='/login' component={Login}></Route>
      <Route path='/errorpage' component={ErrerPage}></Route>
      <Redirect to='/errorpage'  />
    </Switch>
  </HashRouter>,
  document.getElementById('root')
);

src/App.tsx

import React from 'react';
import './App.css';
import HeadNav from './components/HeadNav';

function App() {
  return (
    <div className="App">
      <HeadNav />
    </div>
  );
}

export default App;

src/components/HeadNav/index.tsx

import React from 'react';
import {Route, NavLink, Switch} from 'react-router-dom';
import './index.css';
import First from '../../views/First';
import Two from '../../views/Two';
import Three from '../../views/Three';
import Four from '../../views/Four'

export default function HeadNav(props:any){

  return(
    <>
    <ul>
      <li>
        <NavLink to='/index/first' activeClassName='selectedHead'>首页</NavLink>
      </li>
      <li>
        <NavLink to='/index/two' activeClassName='selectedHead'>二页</NavLink>
      </li>
      <li>
        <NavLink to='/index/three' activeClassName='selectedHead'>散页</NavLink>
      </li>
      <li>
        <NavLink to='/index/four' activeClassName='selectedHead'>肆页</NavLink>
      </li>
    </ul>
    <Switch>
      <Route  path='/index/first' component={First}></Route>
      <Route  path='/index/two' component={Two}></Route>
      <Route  path='/index/three' component={Three}></Route>
      <Route  path='/index/four' component={Four}></Route>
    </Switch>

    </>
  )
}

src\views\First\index.tsx

import {Link} from 'react-router-dom';
// import About from './About';
let qs = require('querystring');


export default function First(props:any){
  const {search} = props.history.location;
  console.log('参数',qs.parse(search.slice(1)));
  return(
    <>
    <h2>First组件</h2>
    <Link to='/login'>跳转登录页</Link>
    {/* <About /> */}
    </>
  )
}

src\views\Error\index.tsx

export default function ErrorPage(){
  return(
    <>
    <h1>404页面</h1>
    </>
  )
}

src\views\Login\index.tsx

export default function Login(){
  return(
    <>
    <h2>登录页</h2>
    </>
  )
}

src\views\Two\index.tsx

export default function First(props:any){
  console.log('two', props);
  
  return(
    <h2>Two组件</h2>
  )
}

src\views\Three\index.tsx

export default function Three(){
  return(
    <>
    <h2>这是Ⅲ页</h2>
    </>
  )
}

src\views\Four\index.tsx

export default function Four(){
  return(
    <>
    <h2>这是肆页</h2>
    </>
  )
}