我遇到一个问题,即在我的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)
`
}
使用链接组件更改路线不会呈现新组件。不过,直接在地址栏中更改路由即可。我猜这是因为浏览器仍然会刷新页面。
答案 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。删除它可以解决此问题。我不确定究竟为什么会这样。