Блог

Когда я изменяю URL-адреса в своем App.js файле, компонент больше не отображается, поэтому, если я перейду на новый URL-адрес, я получу сообщение об ошибке, как будто страницы не существует, но если я перейду на старый URL-адрес, он загрузит навигационную панель, которая находится в родительском компоненте, но не в компоненте маршрута

App.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>
);
 

Вы пропустили тег переключателя, приведенный ниже код будет работать нормально:

  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>
    );
  }
}
 

Добавьте компонент коммутатора, как все предлагают, чтобы компоненты, которые вы монтируете на маршрут, были названы и импортированы в случае Pascal(например, на главной странице). Если это не работает, можете ли вы вставить дамп кода App.js досье? (включая импорт)

Обновление после проверки кода: Я изменил один URL-адрес маршрута, чтобы воспроизвести проблему, «/регистрация» на «/регистрация заново». Вы правы, после изменения URL-адреса, если вы посетите старый(которого больше не существует), вы просто увидите оболочку макета(которая представляет собой панель навигации и нижний колонтитул). Такое поведение понятно, поскольку не было найдено соответствующего маршрута, указывающего на этот путь, и не был указан запасной маршрут для монтирования компонента 404. это объясняет, почему компонент не отображается на старом пути. На новом URL/пути я смог отобразить назначенный ему компонент.

Изменение, которое я внес в код

Старый Путь

Новый Путь

Попробуйте перезапустить сервер react и получить доступ к новому URL-адресу, который вы изменили в app.js файл. Или, если вы изменили URL-адрес иначе, чем я, дайте мне знать.

Используйте переключатель и измените браузер на маршрутизатор.

  class App extends Component {
  render() {
    return (
      <Router>
        <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>
      </Router>
    );
  }
}
 

Кроме того, вы можете попробовать добавить историю; история.createBrowserHistory . . . к маршрутизатору, чтобы проверить, работает ли он.

И тогда вы можете просто щелкнуть события, чтобы изменить путь, поэтому импортируйте историю: история.нажмите(‘/путь’)

Вот пример того, что я имею в виду в комментарии, просто добавьте переключатель, обертывающий маршруты

 <Switch>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/users">
    <Users />
  </Route>
  <Route path="/">
    <Home />
  </Route>
</Switch>