标签: react-router-dom

我以前的网站仅在单击主页选项卡时显示主页，然后如果您单击我的导航栏品牌，它会显示 404。该网站在带有 npm start 的 create-react-app 上运行，但在这里不起作用，也不起作用在构建上。我不知道该应用程序出了什么问题，也许路由器设置搞砸了，我不知道。我已链接了我进行路由器设置的应用程序和索引页面。如果您需要更多信息，请向我询问更多信息。

谢谢

指数

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'
import App from './App';
import './styles/index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

应用程序

import { Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import About from "./routes/About";
import Contact from "./routes/Contact";
import Home from "./routes/Home";
import Project from "./routes/Project";

const App = () => {
  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home …

(react-router-dom版本:4.1.1)

我有工作路线设置,但我有点困惑为什么有<Switch>必要:

index.js

import React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';

import App from './components/App.jsx';
import FridgePage from './components/FridgePage.jsx';

ReactDOM.render(
    <HashRouter>
        <Switch>
            <Route exact path="/" component={App} />
            <Route path="/fridge" component={FridgePage} />
        </Switch>
    </HashRouter>,
    document.getElementById('root')
)

App.jsx

import Header from './Header.jsx';
import {Link} from 'react-router-dom';

export default class App extends React.Component {
    render() {
        console.log(this.props);
        return (
            <div>
                <h1>Herbnew</h1>
                <Link to="fridge">Fridge</Link>
                {this.props.children}
            </div>
        );
    }
}

FridgePage.jsx

import React from 'react';

export default …

import axios from "axios";
import { useNavigate } from "react-router-dom";

export const api = axios.create({
  baseURL: "http://127.0.0.1:8000/",
  headers: {
    "content-type": "application/json",
  },
});

api.interceptors.response.use(
  function (response) {
    return response;
  },
  function (er) {
    if (axios.isAxiosError(er)) {
      if (er.response) {
        if (er.response.status == 401) {

          // Won't work
          useNavigate()("/login");

        }
      }
    }

    return Promise.reject(er);
  }
);

当我从 react-router-dom 使用 BrowserRouter 时，我的路由正在工作。但是为了使用自定义历史记录，我用来自 react-router 的 Router 替换了 BrowserRouter。之后，我的 Route 组件无法正确加载，但 url 正在正确更改。这是我的代码：

AppRouter-JS:----

import React from 'react';
import { Router, Route, Switch} from 'react-router';
// import { BrowserRouter as Router,Route, Switch} from 'react-router-dom';
import {createBrowserHistory} from 'history'

import Header from '../components/Header.js';
import Dashboard from '../components/DashboardPage.js'
import CreateExpense from '../components/CreateExpensePage.js';
import EditExpense from '../components/EditExpensePage.js';
import Help from '../components/HelpPage.js';
import PageNotFound from '../components/PageNotFound.js'
import LoginPage from '../components/LoginPage.js'


export const history = createBrowserHistory();

  const AppRouter = ()=>(
    <Router history={history}>
    <div>
      <Header/> …

你应该如何使用Redirect组件传递道具而不将它们暴露在网址中？

喜欢这个<Redirect to="/order?id=123 />"？我正在使用react-router-dom.

在 v4 中，您将执行 History.push('/whatever', { data }) 然后绑定到该路由的组件可以通过引用 History.location.state 来读取数据对象

现在使用 v6 更改为导航（'whatever'）

你如何像以前一样传递数据？

我正在反应应用程序中实现路由,但现在我混淆了react-router 4.0优于react-router-redux,我也对react-router-dom感到困惑,反应路由器的优点和缺点是什么？ redux,react-router 4.0和react-router-dom？

新版本的react-router-dom（v6.0.0）不识别“重定向”。有什么替代方案吗？

我正在尝试围绕react-router-dom NavLink组件创建一个包装器组件.

我希望我的自定义组件接受所有NavLinks道具,并将它们代理到NavLink.

但是,当我这样做时,我得到:

__PRE__

可以在此处找到该问题的工作演示:https://codesandbox.io/s/w0n49rw7kw

谢谢,

对于使用什么而言似乎有些混淆:

• <Link to='/some/path'>
• <Redirect to='/some/path'/>
• history.push('/some/path')

我一直在使用React/Router一段时间,不同的帖子/答案说明何时使用这些,有时它们与其他人说的不一致.所以我想我需要澄清一下.

根据我的理解Link和本文档:

为您的应用程序提供声明性,可访问的导航.

根据我的理解Redirect和本文档:

将导航到新位置.新位置将覆盖历史堆栈中的当前位置,如服务器端重定向(HTTP 3xx).

看起来我读过的所有帖子几乎每个人都Redirect用来浏览应用程序,没有人建议Link在这篇文章中使用.

现在history可以做同样的事情Link,Redirect除了我有一个历史堆栈跟踪.

问题1:我什么时候想使用Linkvs Redirect,另一个用例是什么？

问题2:既然history可以使用历史堆栈的额外奖励将用户路由到应用程序中的另一个位置,我应该在路由时始终只使用历史对象吗？

问题3:如果我想在应用程序之外进行路由,那么最好的方法是什么？锚标签,Window.location.href,Redirect,Link,以上都没有？