ReactJS - component does not load with url parameter - reactjs

Question

Component does not load when I manually enter a url with parameter in the browser's search bar and naturally it says 'not working' in the console but when I click on a button going to '/:username' url from my index page, I don't get any error, it works pretty well. Where am I wrong?
router.js
const Main = () => (
<Switch>
<Route exact path="/login" component={FrontLogin} />
<Route path="/register" component={FrontRegister} />
<IndexRoute exact path="/home" component={FrontHome} />
<IndexRoute exact path="/:username" component={FrontProfile} />
<Redirect to="/home" />
</Switch>
)
index.js
class Index extends Component{
render(){
return(
<Provider {...Store}>
<BrowserRouter>
<Route component= {Main}/>
</BrowserRouter>
</Provider>
)
}
}
ReactDOM.render(<Index/>,document.getElementById('index'))
profile.index.js
const Profile = (props) => {
const {params} = props.match;
const [data, setData] = useState({});
const history = useHistory();
const [refresh, setRefresh] = useState(false);
console.log(props);
if(!props.location.key){
console.log('not working');
}
if (props.location.key) {
useEffect(() => {
axios
.get(
`/api/${params.username}`,
{
headers: {
Authorization:
"Bearer " +
props.AuthStore.appState.user.access_token,
},
}
)
.then((res) => {
if (res.data.username) {
setData(res.data);
setRefresh(true);
}
})
.catch((error) => {
console.log(error);
});
}, [refresh]);
}
console.log(refresh);
ProvideRoute.js
const PrivateRoute = ({
component:Component,
path,
...rest
}) => (
<Route path= {path} {...rest}
render={
props => isLoggedIn ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname:"/login",
state:{
prevLocation:path,
error:'Giriş yapmalısın.'
}
}}/>
)
} />
)
export default withRouter(PrivateRoute);