时间戳

首页 > 解决方案 > React Router 改变路由但不渲染组件

javascript - React Router 改变路由但不渲染组件

问题描述

我遇到了一个问题，即在我的 react 应用程序中更改路由不会呈现组件。点击刷新后，组件按预期呈现。这只是一个不会出现在生产中的开发运行时的东西，还是我在这里遗漏了什么？

//all  required imports are correctly imported

export default function App() {
    return pug`
            Router
                    Switch
                            Route(path="/" exact component=Home)

                            Route(path="/character" exact component=Character)

                            Route(path="/story" exact component=Story)

                            Route(path="/pay" exact component=Payment)
    `
}

使用 Link 组件更改路由不会呈现新组件。不过，直接更改地址栏中的路线。我猜这是因为浏览器无论如何都会刷新页面。

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

index.js

import { BrowserRouter } from 'react-router-dom';

const defaultRender = () => {
    ReactDOM.render(
      <BrowserRouter>
        <App />
      </BrowserRouter>,
      document.getElementById('root')
    );
};
defaultRender();

应用程序.js 

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import {Page1, Page2} from './pages';

const App = () => {
  return (
    <div className="App">
        <Switch>
          <Route exact path="/page1" component={Page1} />
          <Route exact path="/page2" component={Page2} />
        </Switch>
    </div>
  );
}

export default App;

推荐阅读