无法通过React中的URL访问另一个页面

时间:2020-05-02 05:43:38

标签: reactjs react-router

我想通过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>标签将我的应用程序直接重定向到首页

2 个答案:

答案 0 :(得分:1)

您忘记了导入开关

where(firebase.firestore.FieldPath.documentId(), "==" , "1")

Switch也应大写

编辑1 尝试相应地更改代码:

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

答案 1 :(得分:0)

您必须像orderList.js这样从export default OrderList;导出

app.js内,您需要导入import OrderList from "./components/orderlist";之类的orderList,并确保要导入Switch组件。