Reactjs路由不导航

Question

我目前有一个react应用程序，我正在工作，路由是错误的。我以前已经像这样设置了react应用程序及其路由，但是当试图路由到“details”组件时，只有url发生了变化，但是组件没有加载。多一双眼睛就能看到我错过了什么。我将路线设置为:

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

    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;

    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（path）使用const history = useHistory（）;.

Answer 1

像这样做

1-索引。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"))

您必须添加浏览器路由器才能使用导航

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