javascript 我使用React-Router重定向我的页面，当我点击一个链接，但它不重定向

gcuhipw9 于 11个月前发布在 Java

关注(0)|答案(2)|浏览(117)

这是我的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 (
    <>
      <div>
        <Quote />
        <h2>List of authors</h2>
      </div>
      <Router>
        <div>
          <Link to="/">Author1</Link>
        </div>
        <Routes>
          <Route exactpath="/" element={ <Abraham/>} />
        </Routes>
      </Router>
    </>
  )
}

export default App;

字符串
abraham.js

import React from 'react'

export default function Abraham() {
  return (
    <div>
      <h1>My name is Abraham</h1>
    </div>
  )
}

型
当我点击作者1时，我想重定向到abraham，但没有发生。页面没有重定向。我使用React-Router-DOM将其链接到另一个页面，该页面是我导入的Abraham。

JavaScript

来源：https://stackoverflow.com/questions/77746191/i-have-used-react-router-to-redirect-my-page-when-i-click-on-a-link-but-it-is-no

2条答案

按热度按时间

ki1q1bka1#

我想你在exact path之间漏掉了一个空格，exactpathprop应该写为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 (
    <>
      <div>
        <Quote />
        <h2>List of authors</h2>
      </div>
      <Router>
        <div>
          <Link to="/">Author1</Link>
        </div>
        <Routes>
          <Route path="/" element={<Abraham />} />
        </Routes>
      </Router>
    </>
  )
}

export default App;

字符串

赞(0）回复(0）举报 11个月前

tvmytwxo2#

如果您希望Abraham路由和组件与Quote组件、h2元素和链接分开呈现，则应将后者放置在路由上，以便它们也根据URL路径有条件地呈现。
React-Router v6中的Route组件没有exact prop，应该删除它，因为所有路由现在都使用路由排名得分 * 始终 * 完全匹配。
范例：

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

function App() {
  return (
    <Router>
      <Routes>
        <Route
          path="/"
          element={(
            <div>
              <Quote />
              <h2>List of authors</h2>
              <div>
                <Link to="/abraham">Author Abraham</Link>
              </div>
            </div>
          )}
        />
        <Route path="/abraham" element={<Abraham />} />
      </Routes>
    </Router>
  );
}

字符串

赞(0）回复(0）举报 11个月前

我来回答

javascript 我使用React-Router重定向我的页面，当我点击一个链接，但它不重定向

2条答案

相关问题

热门标签

最新问答