搭建react 的react-router-dom v6路由详情

React Router是一个用于建立SPA应用程序的库，它提供了一种将应用程序状态与URL同步的方式。React Router v6是React Router的最新版本，它引入了一些新的概念和语法。

下面是使用React Router v6搭建路由的步骤：

1. 安装React Router v6

使用npm或者yarn安装React Router v6：

npm install react-router-dom@next

2. 创建路由

在应用程序的入口文件中，使用BrowserRouter创建一个路由：

import { BrowserRouter } from 'react-router-dom';

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

3. 定义路由

使用Route组件定义路由。Route组件的path属性指定URL的路径，component属性指定该路径对应的组件：

import { Route } from 'react-router-dom';

function App() {
  return (
    <div>
      <Route path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
}

在上面的例子中，当URL路径为“/”时，渲染Home组件；当URL路径为“/about”时，渲染About组件。

4. 处理404页面

使用Route组件的exact属性确保路由匹配完全相等的路径。这样可以避免在匹配“/”路径时同时匹配到所有其他路径。

使用Route组件的path属性指定“*”路径，即匹配所有路径的路径。将这个Route组件放在所有其他Route组件的下面，就可以为未匹配到任何路径的URL显示404页面：

import { Route, Routes } from 'react-router-dom';

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

在上面的例子中，当URL路径为任何未匹配到的路径时，渲染NotFound组件。

5. 嵌套路由

使用Routes组件嵌套Route组件，可以创建嵌套路由。在嵌套路由中，父级Route组件的path属性包含所有子级Route组件的path属性的前缀。

import { Route, Routes } from 'react-router-dom';

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />}>
          <Route path="team" element={<Team />} />
          <Route path="history" element={<History />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

在上面的例子中，当URL路径为“/about/team”时，渲染Team组件；当URL路径为“/about/history”时，渲染History组件。

React Router v6引入了一些新的语法，例如使用Routes组件代替Router组件，使用element属性代替component属性等。这些语法的目的是让React Router更加简洁易用。