我有一个带有几条路线的 create-react-app。当我时不时地改变分支等时,我注意到路由不起作用。我认为它唯一一次起作用是因为缓存。
下面是我的路线,为了简单起见,我用简单的
blog
标签替换了 p
路线,因为我开始认为它与我链接到的组件有关。
应用程序.tsx
const history = createBrowserHistory();
...
<Router history={history} data-test="component-app">
<Switch>
<Route exact path="/" component={Main} />
<Route path="/blog">
<p>test</p>
</Route>
</Switch
</Router>
主要.tsx
import React from "react";
import { Link } from "react-router-dom";
export const Main = () => {
return (
<Link to="/blog">Blog</Link>
)
}
发生的事情是这样的:
<p>test</p>
部分但是为什么点击链接后没有立即显示测试?
我使用的版本:
有什么想法吗?
为了让 React-Router-Dom 完美工作,请确保你的整个应用程序都用 BrowserRouter 包装,这在你的 indexJS 中是最好的,如下所示,indexJS 文件的示例
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import reportWebVitals from "./reportWebVitals";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
对我有用的是安装react-router-dom 5,而不是我之前安装的5.2.0。命令是:
npm 安装react-router-dom@5
通常,当我想在“Route”中渲染一些 JSX 并且不想创建不同的组件时,我会使用“render”属性来接收函数并返回您想要渲染的 JSX。
试试这个:
<Route path=“/blog” render={() => <p>test</p>} />
在 App.js 中将 Router 更改为 BrowserRouter 有效!
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
...
return (
<Router history={history} data-test="component-app">
<Switch>
<Route exact path="/">
<Main />
</Route>
<Route path="/blog">
<p>test</p>
</Route>
</Switch>
</Router>
);
感谢大家的帮助!
感谢这通过导入 BrowserRouter 作为路由器对我有用:
从 'react-router-dom' 导入 { BrowserRouter as Router, Route };
并将 "react-router-dom": "^5.2.0" 更新为 "react-router-dom": "^5.3.0"
@isidora-lazić,你的解决方案对我有用。
我安装了
[email protected]
。
我遇到了完全相同的问题。所以就这样做吧。
npm install react-router-dom@5