时间戳

首页 > 解决方案 > 为什么 React 路由 url 没有更新？

reactjs - 为什么 React 路由 url 没有更新？

问题描述

当我更改App.js文件中的 url 时，组件不再呈现，所以如果我转到新的 url，我会收到一个错误，好像页面不存在但如果我转到旧的 url，它会加载导航栏父组件但不是路由中的组件

应用程序.js

import React, { Component } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import "antd/dist/antd.css";

import MainPage from "./mainpage";
import Details from "./Detail";
import SignUp from "../containers/Signup";
import AddItem from "./AddItem";
import Admin from "../containers/admin";
import CustomLayout from "../containers/Layout";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <CustomLayout {...this.props}>
          <Switch>
            <Route exact path="/" component={MainPage} />
            <Route exact path="/signup" component={SignUp} />
            <Route exact path="/Add-Item" component={AddItem} />
            <Route exact path="/admin" component={Admin} />
            <Route exact path="/post/:id" component={Details} />
          </Switch>
        </CustomLayout>
      </BrowserRouter>
    );
  }
}

export default App;

index.js

const store = createStore(reducers, {}, compose(applyMiddleware(thunk)));

const app = (
  <Provider store={store}>
    <App />
  </Provider>
);

标签： reactjsreact-router-dom

解决方案

您错过了 Switch 标签，下面的代码可以正常工作：

 class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <CustomLayout {...this.props}>
          <Switch>
            <Route exact path="/" component={mainpage} />
            <Route exact path="/signup" component={Signup} />
            <Route exact path="/Add-Item" component={AddItem} />
            <Route exact path="/admin" component={admin} />
            <Route exact path="/post/:id" component={Details} />
          </Switch >
        </CustomLayout>
      </BrowserRouter>
    );
  }
}

推荐阅读