无法通过 React 中的 url 访问另一个页面答案

【问题标题】：Unable to access another page via url in React无法通过 React 中的 url 访问另一个页面
【发布时间】：2020-05-02 05:43:38
【问题描述】：

我想通过 url "localhost:3000/orders" 访问 /orders，但我无法这样做。

这是我的 app.js 代码

import React from 'react';
import { BrowserRouter as Router, Route, Redirect,Switch} from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";

import './App.sass';

import Home from "./components/homepage.component"
import Navbar from "./components/navbar.component"
import Contact from "./components/contact.component";
import CreateUser from "./components/create-user.component";
import OrderList from "./components/orderlist.component"

function App() {
  return (
    <Router>
    <Switch>
      <div className="container">
      <Navbar />
      <Route path="/homepage" component={Home} />
      <Route path="/create" component={Contact} />
      <Route path="/user" component={CreateUser} />
      <Route path="/orders" component={OrderList} />
      <Redirect from= '/' to='/homepage' />
      </div>
      </Switch>
    </Router>
  );
}

export default App;

我正在使用<Redirect> 标签将我的应用直接重定向到主页

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

你忘了导入开关

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

而且 Switch 也应该大写

编辑 1 尝试相应地更改您的代码：

import React from 'react';
import { BrowserRouter as Router, Route, Redirect,Switch} from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";

import './App.sass';

import Home from "./components/homepage.component"
import Navbar from "./components/navbar.component"
import Contact from "./components/contact.component";
import CreateUser from "./components/create-user.component";
import OrderList from "./components/orderlist.component"

function App() {
  return (
    <Router>
      <div className="container">
      <Navbar />
      <Route exact path="/" component={Home} />
      <Route path="/homepage" component={Home} />
      <Route path="/create" component={Contact} />
      <Route path="/user" component={CreateUser} />
      <Route path="/orders" component={OrderList} />
      </div>
    </Router>
  );
}

export default App;

【讨论】：

嘿詹姆斯，我仍然无法做到这一点，当我在浏览器中输入“localhost:3000/orders”时，它会重定向回主页。
@BaidManus 尝试添加import{ withRouter } from 'react-router-native'; 和export default withRouter(App)
即使在那之后也没有运气。
@BaidManus 很奇怪。我尝试在我的环境中复制它，但没有遇到任何问题。你介意更新你的帖子完全相同吗？包括所有导入和所有内容。
您可以尝试移除 Switch 并移除重定向吗？而是将其替换为<Route exact path="/"。我更新了我的答案。 @BaidManus

【解决方案2】：

您必须从orderList.js 导出，例如export default OrderList;

在您的app.js 中，您需要像import OrderList from "./components/orderlist"; 一样导入orderList，并确保您的Switch 组件正在被导入。

【讨论】：

嘿 Arun，我正在从 OrderList.component.js 导出“导出默认类 OrderList 扩展 React.Component{.......” 但我仍然无法做到这一点，那一刻我在浏览器中输入“localhost:3000/orders”，它会重定向回主页。 ——
没错，在app.js里面导入，就像我提到的，请确保被导入。
我确实导入了 Switch 并添加了它:)
好吧，你得到的错误信息是什么，你能分享一下快照吗？
所以，没有错误，这是一些路由问题，当我删除标签时，“localhost:3000/”正在工作。但不是代码中包含的标签。