我使用了React-Router来实现页面在点击链接时的重定向，但页面并没有进行重定向。

Question

这是我的 app.js 文件：

import React from 'react'
import Quote from './components/Quote';
import './index.css'
import Abraham from './components/Abraham'
import {
  BrowserRouter as Router,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <>
      
        
        作者列表
      
      
        
          {/* 这里链接应包含路由路径 */}
          作者1
        
        
          {/* 确保路径与链接路径匹配 */}
          } />
        
      
    
  )
}

export default App;

这是 abraham.js 文件：

import React from 'react'

export default function Abraham() {
  return (
    
      我的名字是亚伯拉罕
    
  )
}

我想在点击“作者1”时重定向到 Abraham 组件，但目前并未实现页面跳转。我已经使用了 React-Router-DOM 来将它链接到另一个页面（即已导入的 Abraham 组件）。

Sam Saffron · Answer

您可能在这里遗漏了一个空格，在组件中，exactpath 属性应写为 exact path，即它们之间需要有一个空格。参考文档：https://v5.reactrouter.com/web/api/Route/exact-bool

import React from 'react';
import Quote from './components/Quote';
import './index.css';
import Abraham from './components/Abraham';

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

function App() {
  return (
    <>
      
        
        作者列表
      
      
        
          {/* 如果要链接到Abraham组件，请将"/"替换为"/abraham" */}
          作者1
        
        
          {/* 根据需求，您可以保留或移除 exact 属性 */}
          {/* 如果需要精确匹配根路径，则保留 exact */}
          } />
        
      
    
  )
}

export default App;

Steve Jessop · Answer

如果希望将 Abraham 路由和组件与 Quote 组件、h2 元素以及链接分开渲染，那么应当将这些元素也放在一个路由上，使其根据URL路径条件性地渲染。

在 React-Router v6 中，Route 组件不再有 exact 属性。所有路由现在都通过https://reactrouter.com/en/main/start/concepts#ranking-routes" rel="nofollow noreferrer">路由排名得分始终精确匹配，因此应移除该属性。

示例：

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

function App() {
  return (
    
      
        {/* 根路径 */}
        
              
              作者列表
              
                {/* 修改链接路径为 '/abraham' */}
                作者 Abraham
              
            
          }
        />

        {/* Abraham 路径 */}
        } />
      
    
  );
}