React Router更改路线但不渲染组件

时间:2020-06-02 11:27:54

标签: javascript reactjs react-router react-router-dom

我遇到一个问题,即在我的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)
    `
}

使用链接组件更改路线不会呈现新组件。不过,直接在地址栏中更改路由即可。我猜这是因为浏览器仍然会刷新页面。

2 个答案:

答案 0 :(得分:0)

index.js

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

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

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

答案 1 :(得分:0)

发现了问题。在index.js中,我的应用程序周围有React.StrictMode。删除它可以解决此问题。我不确定究竟为什么会这样。