My codes

App.js

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

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" component={Login} exact />
        <PrivateRoute path="/dashboard" component={Dashboard} exact />
        <Route path="/dashboard/search" component={Search} />
      </Switch>
    </Router>
  );
}

export default App;

Dashboard.js

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import MenuBar from "../../components/MenuBar";
import Search from '../search';

export default function Dashboard() {

  return (
      <Positioner>
        <MenuBar />
        <Content>
          <Switch>
            <Route path="/dashboard/search" component={Search} />
          </Switch>
        </Content>
      </Positioner>
  );
}

MenuBar component moves url to the Link(react-router-dom)

The problem

When I clicked menubar, the url is changed and return component. But when I refresh browser, there is nothing.

<Route path="/dashboard/search" component={Search} />

I know that if I add this code to App.js, it will show up on the page even after refresh.

But I want to handle this inside Dashboard.js

Before refresh

After refresh

I have no idea how to solve it. Can you give me something to reference or give me answer?

CodePudding user response：

Try this.

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" component={Login} exact />
        <Route path="/dashboard/:nameComponent?"  component={Dashboard}/> 
      </Switch>
    </BrowserRouter>
  );
}

CodePudding user response：

I see that you have configured the default route to the login page check what are you doing on the login component page.

and also noticed from the screenshot that the route is dashboards/flanets, but I don't see that URL in the routes.

1. see if you are adding any code which will hide the component if login is done .?

2. What are you doing after login redirects some other page .?

3. if you are redirecting add a route for that page as well

4. you can add and see if that is showing some**Component.

the empty page may be shown if you don't have a router configured for the route