javascript - React-router is not displaying anything in the browser - Stack Overflow

admin管理员组

文章数量:1389758

I am trying to build a simple meetup application using React.The folder structure is as below:

Inside AllMeetups.js:

function AllMeetupspage(){
return <div>AllMeetups</div>
}

export default AllMeetupspage;

Inside Favourites.js:

function Favouritespage(){
    return <div>favourites</div>
    }
    
export default Favouritespage;

Inside Newmeetup.js,

function NewmeetupPage(){
    return <div>Newmeetup</div>
    }
    
export default NewmeetupPage;

Inside App.js,

import { Route } from 'react-router-dom';
import AllMeetupspage from './pages/AllMeetups';

import NewmeetupPage from './pages/Newmeetup';

function App() {
  return (
    
    <div>
      <Route path='/'>
        <AllMeetupspage />
      </Route>
      <Route path='/new-meetup'>
        <NewmeetupPage />
      </Route>    
    </div>
  );
}

export default App;

Inside index.js,

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

I want to see the Allmeetups page content when I load browser.But when I load the browser,it displays nothing.I am new to react and javascript.Could anyone please let me know where I go wrong?

I am trying to build a simple meetup application using React.The folder structure is as below:

Inside AllMeetups.js:

function AllMeetupspage(){
return <div>AllMeetups</div>
}

export default AllMeetupspage;

Inside Favourites.js:

function Favouritespage(){
    return <div>favourites</div>
    }
    
export default Favouritespage;

Inside Newmeetup.js,

function NewmeetupPage(){
    return <div>Newmeetup</div>
    }
    
export default NewmeetupPage;

Inside App.js,

import { Route } from 'react-router-dom';
import AllMeetupspage from './pages/AllMeetups';

import NewmeetupPage from './pages/Newmeetup';

function App() {
  return (
    
    <div>
      <Route path='/'>
        <AllMeetupspage />
      </Route>
      <Route path='/new-meetup'>
        <NewmeetupPage />
      </Route>    
    </div>
  );
}

export default App;

Inside index.js,

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

I want to see the Allmeetups page content when I load browser.But when I load the browser,it displays nothing.I am new to react and javascript.Could anyone please let me know where I go wrong?

• javascript
• reactjs

Share Improve this question Follow asked Dec 20, 2021 at 17:21 lakshmilakshmi 21122 silver badges1414 bronze badges 4

• Is there any error ? – Beginner Commented Dec 20, 2021 at 17:31
• which version of react-router are you using in your project? – DecPK Commented Dec 20, 2021 at 17:31
• 1 If you are using latest version of react router dom, then there is a slight change. I have just re-created your code, please check this. if it works let me know codesandbox.io/s/awesome-dawn-80cd1 – Beginner Commented Dec 20, 2021 at 17:39
• @Learner-Yes,it works...Thanks so much.As you said,there must be a slight change to the new version. – lakshmi Commented Dec 20, 2021 at 17:48

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

If you're using react-router @v6, you need to replace ponent with element

<Route path="/" element={<AllMeetupspage />} />
...
...

you have to wrap your routes with the BrowserRouter ( in the below image used as Router) from the react-router-dom for the routing to work. I think this is the issue in your code, sorry if am wrong.

Eg:

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

const App = () => {
return (
    <>
        <Router>
            <Switch>
                <Route path="/" ponent={HomePage} />
            </Switch>
        </Router>
    </>
);
};

 export default App;

If you are using react-router version@5 or lower you need to do

<Route exact path="/new-meetup" />

because both routes start with the "/" and would always fall back to the first as you don't specify that you want the plete URL match. The exact parameter basically is some kind of regex that says should match the plete url. From the old docs: https://v5.reactrouter./web/api/Route/exact-bool With the version@6 its not necessary anymore as react-router by default will always look for the exact path.

本文标签： javascriptReactrouter is not displaying anything in the browserStack Overflow