标签: react-router-dom

我知道我不是唯一面临这个问题的人，但在网上搜索了一段时间并尝试了它给我的一切之后，我必须在这里询问我的情况。

每当我尝试访问我的应用程序的路线时，我都会收到一个流行的错误，即在不使用与应用程序相关的方式时收到 404。例如，如果我在“/map”时刷新页面，它会显示“无法获取/map”。

这是我当前的配置，虽然我尝试了几个不同的 devServer: {} 设置并使用 publicPath 等：

webpack.config.js：

const path = require("path");

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "dist"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    devServer: {
        historyApiFallback: {
            index: "dist/index.html"
        }
    }
};

应用程序.js

import React, { Component } from "react";
import { connect } from "react-redux";

import { BrowserRouter, Route } from "react-router-dom";

import Homescreen from "./Homescreen";
import Map from …

我将我的投资组合（仍在开发中）托管在github页面上。它只是一个具有静态内容的Web应用程序。而且我需要将Google Analytics（分析）添加到我的投资组合中并获得访问次数（主要是为了熟悉该过程）。我发现了react-ga模块，该模块可用于在React Apps（使用create-react-app创建）上配置Google Analytics（分析）。

然后按照本教程进行配置和托管。我检查了网站的测试流量，但Google Analytics（分析）仪表板没有更新。可能是什么情况？它应该按照教程工作。由于我是Google Analytics（分析）的新手，因此我很难找出问题所在。

这是我的App.js

import React, { Component } from "react";
import HeaderList from "./components/Header";
import "./App.css";
import { Layout } from "antd";
import { Router, Route, Switch } from "react-router-dom";
import createHistory from "history/createBrowserHistory";
import ReactGA from 'react-ga';
import Keys from './config/keys';

import AboutMe from "./components/AboutMe";
import Skills from "./components/Skills";
import Contact from "./components/Contact";
import Projects from "./components/Projects";

const { Content } = Layout;
ReactGA.initialize(Keys.GOOGLE_TRACKING_ID); //Unique …

我正在做项目，我需要用React Router创建一些路由。我的项目是：

每个方块都有一个ID 200和201和，我要单击的每个转弯我都想走一条路线，例如：http://localhost:3000/user/200或http://localhost:3000/user/201何时走那条路线，我希望它出现在body "User 200"或处"User201"，我阅读了文档但不理解。

我的APP.JS：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './App.css';
import Home from './Home';

const App = () => (
  <Router>
    <Home/>
  </Router>
);


export default App;

我的HOME.JS：

import React from 'react';
import Header from './Header';
import Body from './Body';
import './Home.css';

class Home extends React.Component {
  render() { …

我创建了一个ReactJs应用和如何只在访问domain.com/应用。

我把这个加到 index.js

<BrowserRouter basename='/app/'>
  <App />
</BrowserRouter>

现在，当我在页面之间导航时，它可以/app/正常工作（它添加正确），例如。domain.com/app/about.

但是该应用程序仍然可以在没有/app, 例如的情况下访问。当我输入时domain.com/about仍然显示关于页面。

虽然我希望它只能通过 访问/app/，而不是没有它。

我正在使用 react 组件和 react-router-dom 的 Route，但是从 react-router-dom 导入 {Route} 失败并出现错误：-

TypeError: Cannot read property 'prototype' of undefined 

这是触发错误的行，如反应错误默认页面所示。

TypeError: Cannot read property 'prototype' of undefined 

我的中有这段代码index.js：

const routing = (
<Router>
    <Switch>
        <Route exact path="/">
            <Redirect to="/a" />
        </Route>
        <Route path="/a" component={A} />
        <Route path="/b" component={B} />
        <Route path="/c" component={C} />
    </Switch>
</Router>
)

它直接降落，我也/a可以去。/b/c

如果我尝试转到“/something”，它不会呈现任何内容，因为该路径的组件未定义。

我想要实现的是，我不想授予对“/something”的访问权限，尽管它什么也没有提供，也没有呈现任何内容。我希望如果有人尝试访问“/something”，他会自动重定向到“/default”。

是否可以 ？

我在 React hooks 中使用多个上下文和减速器。

这是我的 App.js 文件

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import Map from "./components/Map";
import Header from "./components/Header";
import Signup from "./components/Auth/Signup";
import Login from "./components/Auth/Login";
import UserList from "./components/User/UserList";

import "mapbox-gl/dist/mapbox-gl.css";

import { ApolloProvider } from "react-apollo";
import { ApolloClient } from "apollo-client";
import { WebSocketLink } from "apollo-link-ws";
import { InMemoryCache } from "apollo-cache-inmemory";
import { default as keysConfig } from "./keys.config";
import AuthProvider from "./providers/authProvider";
import …

我有以下代码：

import React, { Component } from 'react';
import '../styles/CountryDetails.css';
import { Link } from 'react-router-dom';
import { IconContext } from 'react-icons';
import { GoArrowRight } from 'react-icons/go';
import { FaPlane } from 'react-icons/fa';

class CountryDetails extends Component {
    constructor(props) {
        super(props);
        this.state = {
            countryData: props.countryData
        }
    }

    render() {
        console.log(this.state.countryData);
        return (
            <div>
                <h1 className="display-3 text-center my-5">{this.state.countryData.countryClassification}</h1>
                    <div className="CountryDetail">

                        <div className="cards shadow-1 container">
                            <div className="row vertical-align">
                                <div className="col-2 text-center">
                                    <IconContext.Provider value={{ color: '#A9A9A9', className: 'icon-hover icon-size'}}>
                                        <div>
                                            <FaPlane …

所以我遇到了一个问题，当点击链接时，URL 正在改变，但视图保持不变，直到我刷新页面。

我研究了许多解决方案，唯一有效的方法是强制重新加载我不想要的页面，因为 React 是一个 SPA（单页应用程序）。我已经尝试过 history.push() 和 Link ，但输出保持不变。如果您需要查看其他文件，这是我的仓库。

应用程序.js

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

import Header from './components/header/header.component';

import HomePage from './pages/homepage/homepage.component';
import Details  from './pages/detail/detail.component';

import './App.scss';

const App = () => (
    <Router>
        <Header />
        <Switch>
            <Route exact path="/" component={HomePage} />
            <Route path="/:name" component={Details}/>
        </Switch>
    </Router>
);

细节组件

import React from 'react';

import LinkButton from '../../components/link-button/link-button.component';

import './detail.style.scss';

class Details extends React.Component {
    constructor(props) { …

我正在尝试使用新发布的路由器实现 PrivateRoute 逻辑，但它似乎无法按预期工作。

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

import LogInPage from "./pages/LogIn";
import DashboardPage from "./pages/Dashboard";

function PrivateRoute({ path, element }) {
  const auth = true;

  return (
    <Route
      path={path}
      element={auth === true ? element : <Navigate replace to="/login" />}
    />
  );
}

function App() {
  return (
    <Routes>
      <Route path="/*" element={<PageNotFound />} />
      <Route path="/" element={<Navigate replace to="/dashboard" />} />
      <Route path="/login" element={<LogInPage />} />
      <PrivateRoute
        path="/dashboard"
        element={<DashboardPage />}
      />
    </Routes>
  );
}

export default App; …