Reactjs路由不导航

Question

我目前正在开发一个反应应用程序，并且路由有问题。我之前已经像这样设置了 React 应用程序及其路由，但是当尝试路由到“详细信息”组件时，只有 url 发生变化，但该组件未加载。多一双眼睛就很高兴看到我所错过的东西。我将路由设置为：

1. index.js：

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import { Router } from "react-router-dom";
    import { createBrowserHistory } from "history";
    
    const history = createBrowserHistory();
    
    const render = () => {
        ReactDOM.render(
            <Router history={history}>
                <App />
            </Router>,
            document.getElementById('root'),
        );
    };
    
    render();

2. App.js：

    import React from 'react';
    import {Route, Switch} from 'react-router-dom';
    import { BreweryPage } from './route.js';
    
    function App() {
      return (
          <>
            <Switch>
              <Route exact path="/" component={BreweryPage}/>
            </Switch>
          </>
      );
    }
    
    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 {AppContainer} from "../../common/header";
    
    const BreweryHomePage = ({ match }) => (
        <AppContainer>
            <Switch>
                <Route exact path={`${match.url}`} component={BreweryPage} />
                <Route exact path={`${match.url}/details/:breweryid`} component={BreweryDetailPage} />
            </Switch>
        </AppContainer>
    );
    
    BreweryHomePage.propTypes = {
        match: PropTypes.shape({
            url: PropTypes.string,
        }),
    };
    
    BreweryHomePage.defaultProps = {
        match: {
            url: '',
        },
    };
    
    export default withRouter(BreweryHomePage);

加载根“/”路径组件，但在使用 history.push( 路由时无法获取要渲染的详细信息组件组件路径）使用 const History = useHistory();。

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);