Question

嗨，我正在尝试将我的网站的路线更改为单击菜单时的“联系”。每当我按下主页按钮“ Forside”时，路由就可以正常工作。

但是，只要我按下“ Kontakt”联系人的按钮，URL就会更改，并且不会呈现任何组件。但是，如果我刷新页面，它就会显示出来。

任何想法我的代码有什么问题，或者有什么方法可以解决它？所有帮助将不胜感激。

我的App.js

import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Forside from './forside';
import Kontakt from './Kontakt';
import Header from './Header'

const App = () => {
return(
<Router>
<div>
<Header/>
<Switch>
<Route exact path="/" component={Forside}/>
<Route path="/kontakt" component={Kontakt}/>
</Switch>
</div>
</Router>
)
}

export default App

这是我链接到不同路线的地方。

import React, { useState } from 'react';
import './header.css'
import { makeStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import ContactMailIcon from '@material-ui/icons/ContactMail';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import {Link} from 'react-router-dom';

const useStyles = makeStyles({
  root: {
    width: 500,
  },
});

const Header = () => {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

return(
<div className="hed">
<h1 className="logo"><span>IT</span> ARBEJDE.DK</h1>

<BottomNavigation
  value={value}
  className="nav"
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
  showLabels
  className={classes.root}
>
  <Link to="/">
  <BottomNavigationAction label="Søg job" icon={<LocationOnIcon />} />
  </Link>

<Link to="/kontakt">
<BottomNavigationAction label="Kontakt" icon={<ContactMailIcon/>} />
</Link>
  

</BottomNavigation>
</div>     
)
}

export default Header

Answer 1

精确添加到您的路线

<Route exact path="/kontakt" component={Kontakt}/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

由于我没有得到答案，所以我自己弄清楚了。因此，我只想与其他可能希望遇到相同错误的人分享解决方案。

我通过重组代码解决了该问题。我将路由器放置在index.js组件中，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter as Router} from 'react-router-dom';

ReactDOM.render(

  <React.StrictMode>
       <Router>
           <App/>
       </Router>
  </React.StrictMode>,

  
  document.getElementById('root')
);

然后将Header代码放在我的App.js中，而不是渲染组件。

所以我重构了这样的代码：

import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Kontakt from './Kontakt';
import Forside from './forside';
import { makeStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import ContactMailIcon from '@material-ui/icons/ContactMail';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import {Link} from 'react-router-dom';
import './header.css'


const useStyles = makeStyles({
    root: {
      width: 500,
    },
  });


const App = () => {
    const classes = useStyles();
    const [value, setValue] = React.useState(0);

return(
<div>
<div className="header-container">
<h1 className="logo"><span>IT</span> ARBEJDE.DK</h1>
<BottomNavigation
  value={value}
  className="nav"
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
  showLabels
  className={classes.root}
>
  <BottomNavigationAction label="Søg job" component={Link} to="/" icon={<LocationOnIcon />} />
  <BottomNavigationAction label="Kontakt" component={Link} to="/kontakt" icon={<ContactMailIcon/>} />
</BottomNavigation>
</div>     

<Switch>
<Route exact path="/" component={Forside}/>
<Route exact path="/kontakt" component={Kontakt}/>
</Switch>
</div>
)
}

export default App

网址更改但未渲染组件React Router

2 个答案: