Reactjs路由不导航

Question

我目前正在开发一个 React 应用程序，但路由有问题。我之前已经设置了这样的反应应用程序及其路由，但是当尝试路由到“详细信息”组件时，只有 url 发生变化，但组件没有加载。多一双眼睛会很高兴看到我缺少什么。我将路线设置为：

1. index.js：

   从“反应”导入反应； 从 'react-dom' 导入 ReactDOM； 从'./App'导入应用程序； 从“react-router-dom”导入{路由器}； 从“历史”导入 { createBrowserHistory };

   const history = createBrowserHistory();

   常量渲染 = () => { ReactDOM.render( , document.getElementById('root'), ); };

   渲染();

2. App.js：

   从“反应”导入反应； 从 'react-router-dom' 导入 {Route, Switch}； 从 './route.js' 导入 { BreweryPage };

   函数应用程序（）{ 返回 （ > ); }

   导出默认应用；

3. route.js

   从“反应”导入反应； 从 'prop-types' 导入 PropTypes； 从 'react-router-dom' 导入 { Route, Switch, withRouter }; 从 './pages' 导入 { BreweryPage, BreweryDetailPage }； 从“../../common/header”导入{AppContainer}；

   const BreweryHomePage = ({ match }) => ( ${match.url}} 组件={BreweryPage} /> ${match.url}/details/:breweryid} 组件={BreweryDetailPage} /> );

   BreweryHomePage.propTypes = { 匹配：PropTypes.shape({ url: PropTypes.string, }), };

   BreweryHomePage.defaultProps = { 匹配： { 网址：''， }, };

   用Router(BreweryHomePage)导出默认值；

加载了根“/”路径组件，但是当使用 const history = useHistory(); 使用 history.push(path) 路由时，我无法获取要呈现的详细信息组件组件。

Answer 1

这样做

1-index.js 应该是这样的：

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"
import { BrowserRouter } from "react-router-dom"

const app = (
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  <React.StrictMode/>
)

ReactDOM.render(app, document.getElementById("root"))

您必须添加 BrowserRouter 才能使用导航

2- 你可以像这样在 App.js 中使用 BreweryPage：

import React from 'react'; 
import {Route, Switch} from 'react-router-dom';
import { BreweryPage } from './route.js';

function App() { 
return ( 
<>
<BreweryPage/> 
</> 
); 
}
export default App;

3- route.js

import React from 'react'; 
import PropTypes from 'prop-types'; 
import { Route, Switch, withRouter } from 'react-router-dom'; 
import { BreweryPage, BreweryDetailPage } from './pages'; 
import { createBrowserHistory } from "history";
import {AppContainer} from "../../common/header";
const newHistory = createBrowserHistory();

const BreweryHomePage = (props) => (
<Router history={newHistory}>
<Switch> 
<Route exact path="/" component={BreweryPage} /> 
<Route path="/details/:breweryid" component={BreweryDetailPage} /> 
</Switch>
</Router>
);


export default withRouter(BreweryHomePage);