Question

您好，我是新来的路由器。问题是，当我单击链接时，顶部的URL会更改，这样我就可以知道发生了什么。但是页面不会自动刷新，因此当我单击它时，将呈现新组件。如果我手动以chrome刷新页面，它将为链接呈现正确的组件。不知道为什么会这样。

我也不知道这是否会对它产生任何影响，但是我确实有一个后端节点js服务器和MongoDB数据库，这不只是前端反应页面。我不确定这是否有影响？ nodejs服务器和Mongodb的功能正常工作，只是不会刷新。我不确定这是否相关。

import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios'; 
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import Register from './Components/Register';
import Login from './Components/Login'; 
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar'; 
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";

function App() {

const[getDefault , setDefault] = useState(String); 





 return (
  <div className="App">


  <h1>react app</h1>
  <Navbar/>
  <BrowserRouter> 
  <div className="App">
  
    
      <Switch>
      <Route path='/app/' component={Register} exact /> 
      
      <Route path='/app/login/' component={Login} exact/> 
        
      <Route path='/app/notes/' component={Notes} exact/> 
      </Switch>
      
  
  
</div>
</BrowserRouter>
  

  
  </div>
  );
 }
  /*
 <div className='row'>
        <div className='col-md-6'>
          <Register/> 
        </div> 
        <div className='col-md-6'>
          <Login/>
        </div>
      </div>

      <div className ='row justify-content-center' >
        <div className='col-md-8 '>
          <Notes/>
        </div>
      </div>

     */
     export default App;

import React, {useState} from 'react'; 
import './Navbar.css';
import {Link, Redirect, Router, Switch} from 'react-router-dom';
import { BrowserRouter } from 'react-router-dom';

function Navbar() {
    return (<div>
           <p style={{color: 'white', fontWeight:'500', fontSize:'50px'}}> Simple Planner </p>
            <div className ='navbarOptions' style={{backgroundColor:'black'}}> 
        
            <BrowserRouter>
            <ul>
                <Link to='/app/' exact style={{  fontSize:'30px', color: '#48c6ef',  fontWeight: '700'}}>
                    
                    <li >
                        Register
                    </li>
                    
                    
                </Link>
                <Link to='/app/login/' exact  style={{fontSize:'30px', color: '#48c6ef', fontWeight:'700'}}>
                    <li>
                        Login
                    </li>
                    
                </Link>

                <Link to='/app/notes/'  exact style={{fontSize:'30px', color: '#48c6ef' ,  fontWeight:'700'}}>
                    <li >
                        Notes
                    </li>
                    
                </Link>

            </ul>
            </BrowserRouter>
           
            </div>
        </div>
    ); 
    
}
export default Navbar ;

Here it shows login in the URL but is still rendering notes when I refresh the page it will show notes

Answer 1

您无需在navlink中使用browserrouter，仅需在路由器中使用，也可以将BrowserRouter放在交换机之前

赞：-

import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios'; 
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import Register from './Components/Register';
import Login from './Components/Login'; 
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar'; 
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";

function App() {

const[getDefault, setDefault] = useState(''); 


 return (
  <div className="App">
    <h1>react app</h1>
    
      <Navbar/>
      <div className="App">
<BrowserRouter> 
        <Switch>
          <Route path='/app/' component={Register} exact /> 

          <Route path='/app/login/' component={Login} exact/> 

          <Route path='/app/notes/' component={Notes} exact/> 
        </Switch>
</BrowserRouter>
      </div>
    
  </div>
  );
}

export default App;

Answer 2

删除导航栏组件中的BrowserRouter。我认为应该可以，通常我们必须使用BrowserRouter一次。

Answer 3

BrowserRouter应该包装所有路由内容，这意味着您应该将链接放在浏览器路由器内

import React , {useState} from 'react';
import logo from './logo.svg';
import './App.css';
import axios from 'axios'; 
import bootstrap from '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 
import Register from './Components/Register';
import Login from './Components/Login'; 
import Notes from './Components/Notes' ;
import Navbar from './Components/Navbar'; 
import { BrowserRouter, Switch, Route, Link, Redirect } from "react-router-dom";

function App() {

const[getDefault, setDefault] = useState(''); 


 return (
  <div className="App">
    <h1>react app</h1>
    <BrowserRouter> 
      <Navbar/>
      <div className="App">

        <Switch>
          <Route path='/app/' component={Register} exact /> 

          <Route path='/app/login/' component={Login} exact/> 

          <Route path='/app/notes/' component={Notes} exact/> 
        </Switch>
      </div>
    </BrowserRouter>
  </div>
  );
}

export default App;

import React, {useState} from 'react'; 
import './Navbar.css';
import {Link, Redirect, Router, Switch} from 'react-router-dom';

function Navbar() {
    return (
    <div>
      <p style={{color: 'white', fontWeight:'500', fontSize:'50px'}}> Simple Planner </p>
      <div className ='navbarOptions' style={{backgroundColor:'black'}}> 
        
        <ul>
          <Link to='/app/' exact style={{  fontSize:'30px', color: '#48c6ef',  fontWeight: '700'}}>Register</Link>
          <Link to='/app/login/' exact  style={{fontSize:'30px', color: '#48c6ef', fontWeight:'700'}}>Login</Link>

          <Link to='/app/notes/'  exact style={{fontSize:'30px', color: '#48c6ef' ,  fontWeight:'700'}}>Notes</Link>

        </ul>
           
      </div>
    </div>
    ); 
    
}
export default Navbar ;

反应URL更改，但在手动刷新之前不呈现组件

3 个答案: