React-16 路由的基本使用

页面中使用路由导航

react中路由使用步骤：

  1. 安装：

npm i react-router-dom

  2. 导入路由的三个核心组件：Router、Route、Link

import { BrowserRouter as Router,Link, Routes, Route } from 'react-router-dom';

  注：BrowserRouter as Router 我们实际上是使用 react-router-dom 中的 BrowserRouter ，然后为了方便使用起了个别名为 Router；

  3.使用 Router 组件包裹整个应用！

const App=()=>{
    <Router>
        <div className='App'>
            //内容页面
        </div>
    </Router>
}

ReactDOM.render(<App/>,document.getElementById('root'))

4.使用Link组件作为导航菜单(路由入口)

<Link to="/路由地址">页面1</Link>

 5.使用Routes、Route组件配置路由规则和要展示的组件(路由出口) 

import React from 'react';
import ReactDOM from 'react-dom';
// 路由
import { BrowserRouter as Router,Link, Routes, Route } from 'react-router-dom';

const First = ()=> <p>页面1的内容</p>
const Second = ()=> <p>页面2的内容</p>
class App extends React.Component{
    state={
        routers:[
            {
                title: 'First',
                path: '/',
                component: First,
            },
            {
                title: 'Second',
                path: '/second',
                component: Second,
            },
        ]
    }
    render(){
        return (
            <Router>
                <div>
                    <h3>React路由基础</h3>
                    {this.state.routers.map((item, index) => {
                        return (
                            <Link
                                key={index}
                                to={item.path}
                            >
                                {item.title}
                            </Link>
                        );
                    })}
                    <Routes>
                    {this.state.routers.map((item, index) => {
                        return (
                            <Route
                                key={index}
                                exact
                                path={item.path}
                                  element={<item.component />} 
                            />
                        );
                    })}
                    </Routes>
                </div>
            </Router>
        )
    }
}
ReactDOM.render(<App />,document.getElementById('root'))

  注：path属性要和要跳转的Link组件的路由地址相同；

         element属性表示点击路由跳转后要展示的组件；

         这是 react-router-dom V6版本语法，与V5及以上语法差异较大，使用V5版本时按以下语法：

import { BrowserRouter as Router,Link, Route } from 'react-router-dom';

   const First=()=>{
    return (<p>页面1的内容</p>)
   }

  const App=()=>{
       <Router>
           <div>
              <h3>React路由基础</h3>
              <Link to="/first">页面1</Link>
              <Route path="/first" component={First}></Route>
           </div>
        </Router>
  }

ReactDOM.render(<App/>,document.getElementById('root'))

编程式导航

通过js代码来实现页面跳转

V6：

import { useNavigate } from 'react-router-dom';
//使用时：
const navigate = useNavigate();
navigate('要跳转的页面路径')

V5：

this.props.history.push("要跳转的页面路径")

react-router-dom v6版本踩坑：

1. 在v6版本中，若想使用

const navigate = useNavigate();
navigate('要跳转的页面路径')

的方式进行路由跳转。那么使用该方法的组件必须使用函数组件而不能使用类组件！

否则会报Hooks方面的错误！

2. 在v6版本中若想使用路由嵌套，就必须按如下方式

父组件路由：

        <Routes>
          <Route path="/home/*" element={<Home/>}></Route>
        </Routes>

子组件路由：

           {/* 渲染子路由 */}
            <Routes>
                <Route path="children" element={<Children />}></Route>
            </Routes>

v5版本则是这样：

父组件路由：

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

子组件路由：

           {/* 渲染子路由 */}
           <Route path="/home/children" component={Children}></Route>

3. 路由重定向问题：

在v6版本中，路由重定向：

import {React,useEffect} from 'react';
// 导入路由所需组件
import { BrowserRouter as Router, Routes, Route,useNavigate  } from 'react-router-dom';
// 导入创建的组件
import Home from "./pages/Home"
import CityList from "./pages/CityList"
//创建路由重定向组件
function Redirect({ to }) {
  let navigate = useNavigate();
  useEffect(() => {
    navigate(to);
  });
  return null;
}

function App() {
  return (
    <Router>
      <div className="App">
        {/* 项目根组件 */}
        {/* 配置路由 */}
        <Routes>
          {/* 路由重定向 */}
          <Route path="/" element={<Redirect to="/home" />}></Route>

          <Route path="/home/*" element={<Home/>}></Route>
          <Route path="/cityList" element={<CityList/>} exact></Route>
        </Routes>
      </div>
    </Router>
  );
}

export default App;